cross-origin 'Authorization'-header with jquery.ajax()

Question

I'm trying to send a cross-origin domain and adding a custom 'Authorization'-header. Please see the code below.

Error:

XMLHttpRequest cannot load {url}. Request header field Authorization is not allowed by Access-Control-Allow-Headers.

function loadJson(from, to) {     $.ajax({         //this is a 'cross-origin' domain         url : "http://localhost:2180/api/index.php",         dataType : 'json',         data : { handler : "statistic", from : from, to : to         },         beforeSend : setHeader,         success : function(data) {             alert("success");         },         error : function(jqXHR, textStatus, errorThrown) {             alert("error");         }     }); }  function getToken() {     var cookie = Cookie.getCookie(cookieName);     var auth = jQuery.parseJSON(cookie);     var token = "Token " + auth.id + ":" + auth.key; }  function setHeader(xhr) {     xhr.setRequestHeader('Authorization', getToken()); } 

I also tried:

headers : { 'Authorization' : getToken() }, 

in the ajax request.

Could it be that the jquery-ajax framework is blocking cross-origin Authentification? How can I fix this?

Update:

By the way: is there a safer method to store the auth.key on client-side then in a cookie? getToken() will be replaced with a more complex method, hashing the body, date,etc.

Answer 1

This is an example of making a CORS request. If you have access to the server (which I assume you do since this is a request to localhost), you will need to add CORS-specific response headers. The simplest thing to do is to add the following response headers:

Access-Control-Allow-Origin: * Access-Control-Allow-Methods: GET, POST, PUT, DELETE Access-Control-Allow-Headers: Authorization 

Your server also needs to be configured to respond to HTTP OPTIONS requests. You can learn more about making CORS requests here: http://www.html5rocks.com/en/tutorials/cors/