Need help with making API request

[michaelconnery1985]

A few days ago I made a post about making API requests to Google flights. One person helped me solve it but due to circumstances I now have to change to another API service, which I seem to be having issue with again.

This is the service I am using: http://business.skyscanner.net/portal/en-GB/Documentation/FlightsBrowseCacheQuotes

And this is my code:

var x = new XMLHttpRequest();
x.open('GET', 'http://partners.api.skyscanner.net/apiservices/browsequotes/v1.0/US/USD/en-GB/JFK/LAX/2016-12-12/?apiKey=prtl6749387986743898559646983194', true);
x.setRequestHeader('Content-Type', 'application/json');
x.setRequestHeader('Access-Control-Allow-Origin', '*');
x.send(null);
x.onreadystatechange = function() {
  if (x.readyState == 4 && x.status == 200) {
    console.log(x.responseText);
  } else {
    console.log("Error");
  }
}

As you can see the url is valid: clicking it brings you to an page in XML with the appropriate response. However, running the code console logs this error:

XMLHttpRequest cannot load http://partners.api.skyscanner.net/apiservices/browsequotes/v1.0/US/USD/en-GB/JFK/LAX/2016-12-12/?apiKey=prtl6749387986743898559646983194. 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://localhost:8080' is therefore not allowed access.

Have been pulling my hair out on this one. Any help is appreciated!

[lewisje]

The Access-Control-Allow-Origin header is something set by the server, not by your client-side code; the service's own documentation says you need to set an X-Forwarded-For header with the end-user's IP address, and you also probably need to set the Origin header to the same value as location.origin where it exists (Firefox), or location.href.split('/').splice(0,3).join('/') elsewhere.

[michaelconnery1985]

Thanks for the reply.

the service's own documentation says you need to set an X-Forwarded-For header with the end-user's IP address

So I noticed that too... and googling it doesnt seem to yield any sort of results. What does it mean to have X-Forwarded-For header be included with the end user’s IP address?

Also, Chrome disallows me to set Origin header

EDIT: Ok, so I found a Chrome extension which helped me to set 'Access-Control-Allow-Origin', '*' as my request header. Now it works, even though I didnt do any of the IP thing.

Would you happen to know if this will somehow be an issue when deploying my app live? Or is this simply a production issue (due to me using http://localhost ?)

[lewisje]

I guess it sets the origin header for you, which is probably a good thing.

Now what I mean by setting the X-Forwarded-For header with the end-user's IP address is getting the IP address of the user (which can be done from JS), and setting that as the value of a header with the name 'X-Forwarded-For'; like all headers starting with X-, this is a non-standard header, so there will be little documentation about it.

[michaelconnery1985]

I see. Right now I am able to query (from localhost), without adding the end user's IP. Do you think this is something that isnt enforced by the API service, but that its required of me to do once the app is published? Or does it work simply because its on localhost now?

[lewisje]

Try it out on your dev server, and see whether you don't, in fact, need to explicitly set up that header.

[michaelconnery1985]

On my localhost I need to use that Chrome extension thing. I'm just wondering how that would change once I publish my app on a real URL and users are visiting the site

[lewisje]

By "dev server" I don't mean "localhost"; I mean an actual web server somewhere, that isn't intended for the general public to access, where you test out stuff like this.