HTTP request header not set

[FakezZ]

So this is the javascript code using jQuery:

$(document).ready(function(){
  var gottenData = {};
  $('#gotten').text("Waiting for data...");
  var url = 'https://bittrex.com/api/v1.1/public/getmarkets';



  $('#getStuff').click(function(){
    var xhr = new XMLHttpRequest({mozSystem: true});
    xhr.onreadystatechange = function(){
      if(this.status == 200 && this.readyState == 4){
        console.log(this.responseText);
      }
    };
    xhr.open('GET', url, true);
    xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
    xhr.send();

	});
});

However the request headers in the request look like this:

 

OPTIONS /api/v1.1/public/getmarkets HTTP/1.1
Host: bittrex.com
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:52.0) Gecko/20100101 Firefox/52.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Access-Control-Request-Method: GET
Access-Control-Request-Headers: access-control-allow-origin
Origin: null
Connection: keep-alive

As you can see the access-control-allow-origin has no value, even though I set it to '*' in code. Any suggestions?

[MoVo]

As far as I'm concerned I believe the Access-Control-Allow-Origin header is set by the server rather than the client. This is called Cross Origin Resource Sharing(CORS) and it can be very confusing (I'm also getting in trouble with that pretty frequently). But I found this article to be incredibly helpful. 

[colonel_mortis]

From client side code, you can set any header aside from the ones in this list, so Access-Control-Allow-Origin is technically allowed. However, cross-domain requests that set a header involve a preflighted request. This is the request that you have posted, which can be seen because it uses the OPTIONS verb rather than GET, which your request is configured to use. The actual request will only be made if the OPTIONS request responds so as to allow the request.

 

However, setting the Access-Control-Allow-Origin header on the request is likely not what you intended to do. That header is supposed to be used in the response from the server, to inform the browser that your site is allowed to access that resource. If you control the server, you will need to change it to support that header; if you don't, and it isn't already including that header, you will have to either contact the site owners, or use a different API.

Once you remove the xhr.setRequestHeader call, it will no longer make the OPTIONS preflight request, but the Access-Control-Allow-Origin header must still be present in the response for your site to be able to access it.