Search code examples
javascriptjqueryajaxdjangodjango-cors-headers

a.toLowerCase when add CORS to the ajax header


I have a Django app online and an API which requires to add special token into header.

When I add it to the $.ajaxSetup it still requires from me CORS Access-Control-Allow-Origin param in header.

When I add it, I'm getting an error: TypeError: a.toLowerCase is not a function

The weird part is when I use the same code in my HttpRequester firefox plugin because I'm getting the proper response with expected data.

The code:

$.ajaxSetup({
    beforeSend: function(xhr) {
        xhr.setRequestHeader({
          'CORS': 'Access-Control-Allow-Origin',
          'token': 'tokenStringHere'
        });
    }
});

$.ajax({
  url: 'myPathToOnlineAppWithApiString',
  type: 'GET',
  contentType: 'application/json',
  headers: {
  }
}).success(function(result){
  console.log('yes!');
}).error(function(error){
  console.log('no!');
});

Solution

  • setRequestHeader accepts two strings, the header name and its value, not an object. See The jqXHR section of the $.ajax entry of the jQuery docs for more information.

    You should replace the object in the parameter with two calls to set those headers individually:

    $.ajaxSetup({
         beforeSend: function(xhr) {
            xhr.setRequestHeader('CORS', 'Access-Control-Allow-Origin');
            xhr.setRequestHeader('token', 'tokenStringHere');
        }
    });