JQuery cross-domain request response headers

Question

I am making ajax requests for cross domains with an html data type. They work fine as I turn on

Access-Control-Allow-Origin 

in the server response. The problem is that I need to get specific headers from the server response and no matter what I do, the response headers, except for the "content type", return null.

jQuery fulfills the request, receives the response, including the headers (I see it from the traffic), but it does not parse it.

I tried using

 crossDomain: true 

It did not help. Here is an example response from the server.

 Access-Control-Allow-Origin:* Cache-Control:private Content-Encoding:gzip Content-Length:514 Content-Type:text/html; charset=utf-8 X-MYRESPONSEHEADER:1 

If the requesting and responding document are on the same server

  success: function (data, status, xhr) { totalRows = xhr.getResponseHeader("X-MYRESPONSEHEADER"); 

works great. I also tried assigning a variable of type $ .ajax to a variable

 var jQxhr = $.ajax(..... 

I do not understand why it will not understand, since jQuery really makes a request and gets a response

Any ideas? Did I miss something?

Update or comment on the dragon

Headers sent on request

 HTTP/1.1 200 OK Cache-Control: private Content-Type: text/html; charset=utf-8 Content-Encoding: gzip Vary: Accept-Encoding Server: Microsoft-IIS/7.5 Access-Control-Allow-Origin: * Access-Control-Allow-Headers: X-MYRESPONSEHEADER Access-Control-Allow-Methods: POST Access-Control-Allow-Methods: GET X-MYRESPONSEHEADER: 24 X-AspNet-Version: 4.0.30319 X-Powered-By: ASP.NET Date: Wed, 29 Feb 2012 11:34:21 GMT 

Content-Length: 514

Answer 1

In the server response, you need to add another CORS header, Access-Control-Allow-Headers . In this case

 Access-Control-Allow-Headers: X-MYRESPONSEHEADER 

Link: https://developer.mozilla.org/en/http_access_control#Access-Control-Allow-Headers

Answer 2

If you are using aws s3 (and I assume this applies otherwise), the problem is probably the lack of a CORS configuration tag. I ran into a similar lack problem. Here is my completed configuration:

 <?xml version="1.0" encoding="UTF-8"?> <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> <CORSRule> <AllowedOrigin>http://localhost:3000</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> <AllowedMethod>POST</AllowedMethod> <MaxAgeSeconds>3000</MaxAgeSeconds> <AllowedHeader>*</AllowedHeader> <ExposeHeader>*</ExposeHeader> </CORSRule> </CORSConfiguration> 

AllowedHeader sets the Access-Control-Request-Headers header, and ExposeHeader sets the Access-Control-Expose-Headers header, without which the browser will not allow javascript to return the headers.

Answer 3

To read headers other than the content type in the server response, the server must provide Access-Control-Expose-Headers , for example:

 Access-Control-Expose-Headers: X-MYRESPONSEHEADER 

@dragon's answer mentions Access-Control-Allow-Headers , which controls only those headers that the client can send when executing a request to the server.

A useful CORS tutorial is here: http://www.html5rocks.com/en/tutorials/cors/

Answer 4

Here is the configuration that worked for me. I put it in the java Filter filter method. Some headers should only be sent with a preliminary check request (method = "OPTIONS"), there is no need to send them each time.

Note that the Authorization header also requires Access-Control-Allow-Credentials.

  HttpServletResponse resp = (HttpServletResponse) res; resp.addHeader("Access-Control-Allow-Origin", "http://your_domain:your_port"); resp.addHeader("Access-Control-Allow-Credentials", "true"); if (((HttpServletRequest) req).getMethod().equals("OPTIONS")) { resp.addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE"); resp.addHeader("Access-Control-Allow-Headers", "Authorization"); return; }