Cross Origin API Request using Javascript?

Question

I'm trying to pull data from an API using the following code and running it in an HTML page on Firefox:

var xobj = new XMLHttpRequest();
xobj.overrideMimeType("application/json");
url = 'https://xxxx.xxx?p=api';
xobj.open('GET', url, true);
xobj.onreadystatechange = function () {
      if (xobj.readyState == 4 && xobj.status == "200")
        parsedjson = xobj.responseText;
        parsedjson = JSON.parse(parsedjson);

But I get the following error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://xxxx.xxx?p=api. (Reason: CORS header 'Access-Control-Allow-Origin' missing).

And the following response headers (status: 302):

Cache-Control: private
Content-Length: 502
Content-Type: text/html; charset=utf-8
Date: <Scrubbed>
Location: https://xxxx.xxx?p=api&additionalparameter=data
Server: <Scrubbed>
Set-Cookie: value: path=/; secure; HttpOnly
<Scrubbed>
X-AspNet-Version: <Scrubbed>
X-Frame-Options: SAMEORIGIN
X-Powered-By: ASP.NET
X-UA-Compatible: IE=edge
x-href: <Scrubbed>

It might be useful to know that the request header contains:

Origin: null

I've read about JSONP and CORS - but not sure which applies here, and how to use. How would I update my code to get the data? Note, I don't have any control over the server, however I can access the data if I visit through my browser.

I've also read that an option is to set up my own small server. That might work, but the requirements for this project is to make it client-side (so I can share the js/html document with others and they can plug & play without having to set up their own servers...

Possible Duplicate of [“No 'Access-Control-Allow-Origin' header is present on the requested resource”](http://stackoverflow.com/questions/20035101/no-access-control-allow-origin-header-is-present-on-the-requested-resource) — Tushar, Apr 21 '16 at 14:22
Possibly - that question is in Jquery though, this is pure javascript, also the answers there didn't get me a resolution — SimaPro, Apr 21 '16 at 14:25

score 0 · Answer 1 · answered Apr 21 '16 at 16:25

You can't make cors connections when the response from server doesn't allow you to do so (that means server must serve your origin in its Access-Control-Allow-Origin header).

JSONP would also require some stuff to be done on the server side. If the server responses with JSON then you may try using JSONP with a little help of this. If it doesn't work, you have to use your own server the proxy the connection between sites.

Cross Origin API Request using Javascript?

1 Answers1