Issue calling RouteXL API from a Single Page Application (AngularJS)

I’m evaluating the routeXL for a customer of mine, who is interested in a paid account.

When attempring to post locations to https://api.routexl.nl/tour via javascript, I get this error in Chrome:

XMLHttpRequest cannot load https://api.routexl.nl/tour. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘https://192.168.1.155’ is therefore not allowed access. The response had HTTP status code 401.

Is the RouteXL API CORS compliant?  It doesn’t appear so.  The CORS preflight OPTIONS request always returns this error.

Is there any way the API can be changed to support usage in Single Page applications like this?  We’re very interested in using the API, but if we can’t make requests this obviously will not work for us.

Please let me know what can be done about this.

Thanks,

Fred V.

The API is not CROS compliant at this moment. That is, no origin domain is checked and no header is set. If this is required, we can add it to the list for development.

The 401 error may be indicating a problem with authentication. To check your account, use the credentials to sign in on the main website.

The maximum of 10 points is only in the free version. If you upgrade your account on the website, up to 150 points are allowed.

We’ve added these headers to the response:

Access-Control-Allow-Methods: GET,POST
Access-Control-Allow-Origin: *

Can you confirm that this makes our API CORS compliant and your problem is solved?

The CORS headers may not have been complete yet. Some more have been added.

Can you try again?

We’ve added an example for Javascript on Github:

https://github.com/routexl/RouteXL-API-Connector

Good that it returns results and the CORS issue is solved.

On the route itself, note that the API uses the last location as the finish destination, while the website uses the home location as finish by default. If the API needs to return a roundtrip the departure should therefore be added twice. Please start a new thread if you’d like to discuss the routing in detail.

You will be glad to know that the 401 error is not as bad as it may seem, Either you are sending too many point (10 is the maximum including start and finish points) or your json is malformed.

You need an array like this for each point.

[‘name’ => ‘identifier’, ‘lat’ => ‘latitude’, ‘lng’ => ‘longitude’]

Once you have compiled your array just json encode it and sent it to the API.

regards to your single page usage, yes it can be done instead of doing it all inside one file, use ajax to send and retrieve the data and pull it into the required page.

Yes we would need the API to support CORs in order to use it, as would anyone wishing to use it from javascript in any modern browser.

I am having this problem. Is there any way I can get a sample of properly using standard javascript or jquery ajax to call your api? I can not get past the 401 errors.

// Here is what I tried. This does not work. in place of user:password I use a valid login which I test from curl, so I know it works. But from this ajax call all I get is status 401 unauthorized error. What am I doing Wrong?

$.ajax({     

      url: ‘https://api.routexl.nl/status/hello+world’,

      type: ‘GET’,

crossDomain: true,

      contentType: ‘application/x-www-form-urlencoded’,

      beforeSend: function(request) {

        request.setRequestHeader(‘Authorization’, ‘Basic user:password’)

        // I am encoding the username and password in the real request

      },

      success: function(result) {

        console.log(result)

      },

      error: function(error) {

        console.log(error)

      }

    });

I have tested the example. It does return results now, but is not optimizing the routes as it does when i test the same locations from the website (routexl.com). I tried using the skipOptimisation flag and it seems to have no effect no matter what I set it to.

Here is my sample data:
locations = [

{ 'name' : '200 N Addison Ave, Elmhurst, IL 60126',



 'lat' : 41.9033, 'lng' : -87.9416 },

 { 'name' : '4207 Aqua Verde Dr,,Austin,TX,78746,1014',

 'lat' : 30.3439, 'lng' : -97.8094 },

 { 'name' : '255 Tree Haven Ave N,,Powell,OH,43065,8669', 'lat' : 40.1531, 'lng' : -83.0838 },

 { 'name' : '4305 Hidden Valley Ct,,Colleyville,TX,76034', 'lat' : 32.8736, 'lng' : -97.1553 },

 { 'name' : '831 Jackson Ave, River Forest, IL 60305',

  'lat' : 41.8952, 'lng' : -87.8129}];