0

My code: var answer_array = [];

var req = new XMLHttpRequest();
req.onload = function() {
    answer_array = answer_array.concat(JSON.parse(this.responseText).results);

    console.log(answer_array);

}

req.open("GET", "https://api.comettracker.com/v1/gpsdata?fromdate=2015-10-13");
req.setRequestHeader("authorization", "Basic Base64 encoded credentials");
req.setRequestHeader("cache-control", "no-cache");
req.setRequestHeader("postman-token", "b94725ff-408b-c82e-a985-6c38feb380af");
req.send();

This is what is in my console: scripts2.js:22 OPTIONS https://api.comettracker.com/v1/gpsdata?fromdate=2015-10-13 (anonymous function) @ scripts2.js:22 2015-10-21 12:41:09.059 index.html:1 XMLHttpRequest cannot load https://api.comettracker.com/v1/gpsdata?fromdate=2015-10-13. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 405.

When I go to the network tab on Chrome I see this: gpsdata?fromdate=2015-10-13 OPTIONS 405 xhr scripts2.js:22 0 B 452 ms

Jerry Stratton
  • 3,287
  • 1
  • 22
  • 30
Vanessa Torres
  • 169
  • 1
  • 2
  • 9

1 Answers1

1

This error message:

No 'Access-Control-Allow-Origin' header is present on the requested resource

means that you are running into a cross origin permission issue which means that you are trying to access a site that does not permit access from the domain that your page is on. If your page is on your local drive being accessed with a file:// URL, then the first thing you can do is to put it on an actual web server and try it there since file:// URLs have some additional restrictions on them.

If that doesn't work either, then the issue is that the api.comettracker.com site is not allowing access from your particular site.

When I put your code into a jsFiddle and try it there and look at the network trace, what I see there is that the OPTIONS method which is used to pre-flight a cross origin request is being rejected by api.comettracker.com which tells the browser the cross origin request as currently formatted is not permitted.

I get a different error if your custom headers are removed from the request so I think that there's something incorrect about your custom headers. Since I don't know that particular API, don't have your access credentials or know how to use them, I don't know what exactly to suggest for the headers, but I think that's the place to start.

jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • Do you think that if I run my javascript without the browser like in "batch", I will have the same problem? I have made HTTP over AJAX before but is my first time with Basic Authentication. – Vanessa Torres Oct 21 '15 at 19:07
  • @VanessaTorres - Only the browser has cross origin protections. So, if you run your script in some other Javascript environment (such as node.js), it will not have this cross origin issue. – jfriend00 Oct 21 '15 at 19:11
  • Thank you for your help. Another question when I tried to run this using node.js I'm receiving this message and I have no idea what can be? var req = new XMLHttpRequest(); ^ ReferenceError: XMLHttpRequest is not defined at Object. (/Users/vanessa/Desktop/APIClient/scripts/scripts2.js:10:19) – Vanessa Torres Oct 21 '15 at 19:28
  • @VanessaTorres - there is no `XMLHttpRequest` in node.js. That is a browser-specific object. You would probably want to use the [`request()`](https://github.com/request/request) module in node.js to make the request or you could just use the [http module](https://nodejs.org/api/http.html) (though the request module has more features for this). There is even a [module that makes an `XMLHttpRequest` object](https://github.com/driverdan/node-XMLHttpRequest) in node.js if you want to go that way. – jfriend00 Oct 21 '15 at 19:42
  • I appreciate your help! – Vanessa Torres Oct 21 '15 at 20:20