Problem with JQuery AJAX and Basic Auth

Been trying to work the API for a day or so now. 

Been using postman extension in chrome and have successfully managed to send a basic auth request through postman to /api/tour and return optimized locations but when trying to use JQuery ajax to the same I keep getting a 401.

So I thought I would step back to basics and try and simply authenticate a get request through the
ajax but I am still hitting a brick wall.

$.ajax({     
      url: ‘https://api.routexl.nl/status/hello+world’,
      type: ‘GET’,
      contentType: ‘application/x-www-form-urlencoded’,
      beforeSend: function(request) {
        request.setRequestHeader(‘Authorization’, ‘Basic username:password’)
        // I am encoding the username and password in the real request
      },
      success: function(result) {
        console.log(result)
      },
      error: function(error) {
        console.log(error)
      }
    });

Could someone possibly help me understand what I am doing wrong.

This is the response I get:
https://api.routexl.nl/status/hello+world
Failed to load resource: the server responded with a status of 401 (Unauthorized)

OPTIONS https://api.routexl.nl/status/hello+world 401 (Unauthorized)

XMLHttpRequest cannot load https://api.routexl.nl/status/hello+world.
Invalid HTTP status code 401

Hopefully someone can shed some light on this.

Upon a little more research into this it doesn’t seem as if browsers process the authorization unless withCredentials is set to true, however pre-flight requests to CORS enabled API’s are not allowed process withCredentials requests and also use the wildcard ‘*’ in Allow-Access-Control-Origin?

I am very eager to start using this API but can’t seem to get passed this issue.

The postman extension seems to avoid CORS as it is an extension but my requests just won’t authenticate.

I may be missing something, but any help in this matter would be appreciated.