401 Authorization Error on JS Web App

API
1

Hi,
I’m trying to get the free route planning to work on my app before I subscribe to the 100 point plan, but I keep getting a 401 Authorization error, even after rechecking my account credentials on the site. When I try to run the curl example for Hello World or even my own POST Tour request, curl returns nothing.

Here is my usage of the RouteXL_API_Connector:

function RouteXL_API_Connector() {
this.tour = function(locations, success_callback, error_callback) {

	var request = jQuery.ajax({

		beforeSend: function (xhr) {
		    xhr.setRequestHeader ("Authorization", "Basic " + btoa("username:password"));
		},
  url: "https://api.routexl.nl/tour",
  method: "POST",
  dataType: "json",
  data: { locations: locations },
  user: '{username}:{password}'
});

	request.done(function( msg ) {
		success_callback(msg);
	});

	request.fail(function( jqXHR, textStatus ) {
		error_callback(textStatus);
	});

};
}

I’m using the same credentials I login to the site in place of {username}, {password}.

Could you please point me in the right direction if I’m misinterpreting something?

Thank you,
Rameez

2

Your credentials should be in the request header:

xhr.setRequestHeader ("Authorization", "Basic " + btoa("username:password"));

not in this part you added:

user: '{username}:{password}'

3

Thanks for the fast response, and that’s alleviated the authentication problem, but now I’m getting a 404 Not Found error. On inspection of Network logs, it seems that my GET request failed even though I’m requesting a POST?

4

Indeed if you GET the /tour request, it will return a 404 error. But we don’t know why the POST becomes a GET. What browser are you using to make the request? Does another browser give the same problem?

5

I’m using Chrome, I’ve tried on Firefox and I’m still getting a 404 :confused:

6

So I tried the Hello World Get request to see if I was at least able to communicate with the API, and that worked. Turns out jquery.ajax uses a ‘type’ parameter instead of ‘method’ for asking for the HTTP type request. Changing that now gave me a 409 conflict error.

7

Screenshot%20from%202020-06-22%2000-06-22

If I use the locations array in the github example the tour POST request works fine, but when I try mine it keeps giving me a 409, and I’ve checked the formatting and variable names and types for the parameters.
Here’s the format of my locations array, any ideas?

8

Just fixed it. Turns out the gps coordinates I was loading into my locations array from firebase were running synchronously and would pass an empty locations array to the API before the loop finished. Slapping an await solved my problem.

1 Like
9

We’ve checked the type instead of method issue, to see if we need to adjust our sample code. Here’s from jQuery documentation:

type (default: 'GET' )
Type: String
An alias for method . You should use type if you’re using versions of jQuery prior to 1.9.0.

So, if you were using an older jQuery version that would explain the problem.

10

Hmm, I’m using jQuery 3.4.1, not sure then :man_shrugging: