可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效,请关闭广告屏蔽插件后再试):
问题:
I am making cross domain ajax requests with html data type. They work OK as I include
Access-Control-Allow-Origin
in the response from the server. Problem is I need to get certain headers from the server's response and whatever I do, response headers apart from "content type" return null.
jQuery does the request, retrieves the response including headers (I can see it from the traffic) but it doesn't parse it.
I have tried using
crossDomain: true
It didn't help. Here is the sample 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 requesting and responding document are on same server
success: function (data, status, xhr) { totalRows = xhr.getResponseHeader("X-MYRESPONSEHEADER");
works fine. I have also tried to assign $.ajax to a variable like
var jQxhr = $.ajax(.....
I don't see why it wouldn't be parsed since jQuery actually makes the request and gets the response
Any ideas? Am I missing something?
Update or dragon's comment
Headers sent to 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
回答1:
You need to add another CORS-specific header in the server response, Access-Control-Allow-Headers
. In this case,
Access-Control-Allow-Headers: X-MYRESPONSEHEADER
Ref: https://developer.mozilla.org/en/http_access_control#Access-Control-Allow-Headers
回答2:
If you're using aws s3 (and I assume this is applicable otherwise), the problem is possibly a missing CORS configuration tag. I ran in to a similar problem with missing. Here's 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 Access-Control-Expose-Headers header, without which the browser wont allow javascript to use the returned headers.
回答3:
To read headers other than content-type in the server's response, the server must supply Access-Control-Expose-Headers
, eg:
Access-Control-Expose-Headers: X-MYRESPONSEHEADER
@dragon's answer mentionsAccess-Control-Allow-Headers
which only controls which headers the client can send when making a request to the server.
Useful CORS tutorial here: http://www.html5rocks.com/en/tutorials/cors/
回答4:
Here is configuration that worked for me. I've put it in java Filter filter method. Some headers need to be send only with preflight request (method = "OPTIONS"), there is no need to send them every time.
Please notice that for "Authorization" header the "Access-Control-Allow-Credentials" is also required.
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; }