How do you send a custom header in a CORS preflight OPTIONS request?

by

Your problem isn’t with jquery, it’s in how CORS works. Your beforeSend callback was probably working as expected… but browsers won’t send custom headers in preflight requests, no matter what. This is by design; the purpose of the preflight request is to determine what information the useragent (browser) is permitted to send beyond the “simple” stuff defined in the CORS spec. Thus, for the useragent to send any non-simple data (such as your custom header) as part of the preflight request is self-defeating.

To instruct the useragent to include your custom header in the actual CORS request, include a Access-Control-Allow-Headers header in your preflight response. It’s worth noting that if you’re not overly concerned with what headers the useragent transmits, I believe you can just echo back the value of the Access-Control-Request-Headers request header field as the value of the Access-Control-Allow-Headers you send in the response.

You may also want to include some of the other Access-Control-Allow-* headers defined in the syntax section of the spec.

See also CORS – How do ‘preflight’ an httprequest?

See also Mozilla’s CORS preflight example, which shows these headers in action.

More Related Contents:

  1. XMLHttpRequest Origin null is not allowed Access-Control-Allow-Origin for file:/// to file:/// (Serverless)
  2. “Origin null is not allowed by Access-Control-Allow-Origin” error for request made by application running from a file:// URL
  3. How to get a cross-origin resource sharing (CORS) post request working
  4. Why am I getting an OPTIONS request instead of a GET request?
  5. What’s the point of the X-Requested-With header?
  6. CORS issue – No ‘Access-Control-Allow-Origin’ header is present on the requested resource
  7. Access-Control-Allow-Origin error sending a jQuery Post to Google API’s
  8. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘…’ is therefore not allowed access
  9. IE9 jQuery AJAX with CORS returns “Access is denied”
  10. A CORS POST request works from plain JavaScript, but why not with jQuery?
  11. XMLHttpRequest cannot load an URL with jQuery
  12. CORS header ‘Access-Control-Allow-Origin’ missing
  13. How to enable CORS in flask
  14. jQuery posting valid json in request body
  15. CORS jQuery AJAX request
  16. Ajax using https on an http page
  17. jQuery CORS Content-type OPTIONS
  18. Error :Request header field Content-Type is not allowed by Access-Control-Allow-Headers
  19. How do I know if jQuery has an Ajax request pending?
  20. xmlHttp.getResponseHeader + Not working for CORS
  21. How do I get the HTTP status code with jQuery?
  22. Can onprogress functionality be added to jQuery.ajax() by using xhrFields?
  23. CORS request – why are the cookies not sent?
  24. Bottle Py: Enabling CORS for jQuery AJAX requests
  25. What is the difference between XMLHttpRequest, jQuery.ajax, jQuery.post, jQuery.get
  26. Return $.get data in a function using jQuery
  27. How can I set CORS in Azure BLOB Storage in Portal?
  28. Allowing frontend JavaScript POST requests to https://accounts.spotify.com/api/token endpoint
  29. jQuery AJAX call results in error status 403
  30. jQuery: get the file name selected from

Leave a Comment