AJAX CORS – How to Get Response Header via Cross-Domain AJAX

If you are using jQuery to do your ajax request, it will not send the header X-Requested-With (HTTP_X_REQUESTED_WITH) = XMLHttpRequest, because it is cross domain. But there are 2 ways to fix this and send the header:

Option 1) Manually set the header in the ajax call:

$.ajax({
     url: "http://your-url...",
 headers: {'X-Requested-With': 'XMLHttpRequest'}
});  

Option 2) Tell jQuery not to use cross domain defaults, so it will keep the X-Requested-With header in the ajax request:

$.ajax({
  url: "http://your-url...",
 crossDomain: false
});

But with this, the server must allow those headers, then the server needs to print those headers:

print "Access-Control-Allow-Origin: *\n";
print "Access-Control-Allow-Headers: X-Requested-With, Content-Type\n";

The first line above will avoid the error "Origin is not allowed by Access-Control-Allow-Origin."
The second line will avoid the error "Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers."

I wanna thank jbl for pointing me to the right SO question. I got it now...

So, OK... the answer. If you ever wanted to set your own HTTP Header information, and then fetch it using cross-domain Ajax, or something like that, here are some extra HTTP Header you should set on your server side, before sending the response text.

header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Methods: POST, GET");      
header('Custom-Header: Own-Data');
header('Access-Control-Expose-Headers: Custom-Header');

Example above uses PHP. But use your own language, what ever you use to set them.

When I asked this question, I had all of that except Access-Control-Expose-Headers. After putting that in, my Javascript Ajax can read the content of HTTP Header Custom-Header.