66588

Authorization Header appended only once in AJAX CORS request

Question:

I'm calling my RESTful API from Javascript in a CORS scenario.

I'm using JQuery to send my POST authenticated request. Here is an example:

function post(settings, addAccessToken) { settings.type = 'POST'; settings.cache = false; if (settings.dataType === undefined) settings.dataType = 'json'; if (addAccessToken) { settings.xhrFields = { withCredentials: true }; settings.beforeSend = function (request) { request.setRequestHeader('Authorization', 'Bearer <my access token>'); }; settings.headers = { 'Authorization': 'Bearer <my access token>' }; } return $.ajax(settings); }

On server side, I can see the first call coming with the 'Authorization' Header correctly valued, while all the others don't have such Header.

What am I missing?

Thank you

cghersi

Answer1:

I solved my issue so I want to give the answer to everybody else is in the same situation.

1) The problem was to enable OPTIONS http request from server-side. In fact, there is a first call to the same url but with verb 'OPTIONS' and then a second call to the real url with POST|GET method. If the server doesn't properly answer to the first 'OPTIONS' call, e.g. specifying the correct Allowed Headers etc., the second call doesn't work.

2) The notation

settings.headers = { 'Authorization': 'Bearer <my access token>' };

is not working. The only way to setup an header is:

settings.beforeSend = function (request) { request.setRequestHeader('Authorization', 'Bearer <my access token>'); };

Hope this can help other people in the future.

cghersi

Recommend

  • Why do I get the ERROR: “No 'Access-Control-Allow-Origin' header present on the requested
  • Uncaught TypeError: this.delete is not a function
  • Javascript DropDown menu with ajax and json
  • Looping through array with callback
  • CORS request using jQuery - $.ajax()
  • socket.io, 'Access-Control-Allow-Origin' error
  • EventSource / SSE (Server-Sent-Svents) - Security
  • record post in asp.net mvc 3 and jquery
  • Send data between php and dart
  • Is it possible to fake a multipart/form-data post with a jquery ajax call?
  • Equivalent to ajaxSend and/or ajaxComplete with jsonp?
  • Magic number for plain text file
  • angularjs:timeout not working in $http POST request
  • AJAX Permission Denied On IE?
  • parse json list in reverse order
  • kendo uploader Cross domain issue in Web.Api
  • Jquery ajax request not able to return data to other function
  • Problem in Loading xml from specified url using javascript in FF & Google Chrome
  • formediting modals shows at wrong position
  • Converting datatype Char to Nvarchar
  • What is corresponding c++ data type to SQL numeric(18,0) data type?
  • Angular2 - Template reference inside NgSwitch
  • Javascript CORS - No 'Access-Control-Allow-Origin' header is present
  • Getting error 'Cannot read property 'document' of undefined' while importing exp
  • pyodbc doesn't report sql server error
  • JSON response opens as a file, but I can't access it with JavaScript
  • dc-js disable selecting slices on click for pie chart
  • Uncaught Error: Could not find module `ember-load-initializers`
  • req.body is undefined - nodejs
  • Accessing IRQ description array within a module and displaying action names
  • Modifying destination and filename of gulp-svg-sprite
  • Javascript Callbacks with Object constructor
  • Where to put my custom functions in Wordpress?
  • Importing jscolor library in angular 2
  • jqPlot EnhancedLegendRenderer plugin does not toggle series for Pie charts
  • Bitwise OR returns boolean when one of operands is nil
  • sending mail using smtp is too slow
  • Busy indicator not showing up in wpf window [duplicate]
  • Why is Django giving me: 'first_name' is an invalid keyword argument for this function?
  • How can I use `wmic` in a Windows PE script?