A CORS POST request works from plain JavaScript, but why not with jQuery?

by

UPDATE: As TimK pointed out, this isn’t needed with jquery 1.5.2 any more. But if you want to add custom headers or allow the use of credentials (username, password, or cookies, etc), read on.

I think I found the answer! (4 hours and a lot of cursing later)

//This does not work!!
Access-Control-Allow-Headers: *

You need to manually specify all the headers you will accept (at least that was the case for me in FF 4.0 & Chrome 10.0.648.204).

jQuery’s $.ajax method sends the “x-requested-with” header for all cross domain requests (i think its only cross domain).

So the missing header needed to respond to the OPTIONS request is:

//no longer needed as of jquery 1.5.2
Access-Control-Allow-Headers: x-requested-with

If you are passing any non “simple” headers, you will need to include them in your list (i send one more):

//only need part of this for my custom header
Access-Control-Allow-Headers: x-requested-with, x-requested-by

So to put it all together, here is my PHP:

// * wont work in FF w/ Allow-Credentials
//if you dont need Allow-Credentials, * seems to work
header('Access-Control-Allow-Origin: http://www.example.com');
//if you need cookies or login etc
header('Access-Control-Allow-Credentials: true');
if ($this->getRequestMethod() == 'OPTIONS')
{
  header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');
  header('Access-Control-Max-Age: 604800');
  //if you need special headers
  header('Access-Control-Allow-Headers: x-requested-with');
  exit(0);
}

More Related Contents:

  1. “Origin null is not allowed by Access-Control-Allow-Origin” error for request made by application running from a file:// URL
  2. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘…’ is therefore not allowed access
  3. How can I upload files asynchronously with jQuery?
  4. Why does my JavaScript code receive a “No ‘Access-Control-Allow-Origin’ header is present on the requested resource” error, while Postman does not?
  5. Why does my http://localhost CORS origin not work?
  6. Origin null is not allowed by Access-Control-Allow-Origin
  7. Allow Google Chrome to use XMLHttpRequest to load a URL from a local file
  8. jQuery XML error ‘ No ‘Access-Control-Allow-Origin’ header is present on the requested resource.’
  9. Upload file with Ajax XMLHttpRequest
  10. Why am I seeing an “origin is not allowed by Access-Control-Allow-Origin” error here? [duplicate]
  11. CORS – How do ‘preflight’ an httprequest?
  12. No ‘Access-Control-Allow-Origin’ header is present on the requested resource error
  13. What is the cleanest way to get the progress of JQuery ajax request?
  14. Cross-Origin Read Blocking (CORB)
  15. Why am I seeing an “origin is not allowed by Access-Control-Allow-Origin” error here? [duplicate]
  16. Find out how long an Ajax request took to complete
  17. Understanding XMLHttpRequest over CORS (responseText)
  18. Catching an Access-Control-Allow-Origin error in JavaScript
  19. CORS request not working in Safari
  20. Show a progress bar for downloading files using XHR2/AJAX
  21. CORS not working on Chrome
  22. XMLHttpRequest cannot load, No ‘Access-Control-Allow-Origin’ header is present on the requested resource [duplicate]
  23. Getting Spotify API access token from frontend JavaScript code
  24. Does Wikipedia API support CORS or only JSONP available?
  25. How to Detect Cross Origin (CORS) Error vs. Other Types of Errors for XMLHttpRequest() in Javascript
  26. Browser waits for ajax call to complete even after abort has been called (jQuery)
  27. Microsoft Edge blocked cross-domain requests sent to IPs in same private network CIDR
  28. How can I use deflated/gzipped content with an XHR onProgress function?
  29. Google’s Places API and JQuery request – Origin http://localhost is not allowed by Access-Control-Allow-Origin
  30. CORS error with jquery

Leave a Comment