跨域 AJAX 预检失败来源检查
这似乎不起作用：
$.ajax({
url: "http://localhost:3000/foo.json",
data: { foo: 'bar' },
headers: { 'HTTP_X_CUSTOMHEADER': 'foobar' },
xhrFields: { withCredentials: true }
});
当我在 jsfiddle 上运行它时，会触发一个 OPTIONS 请求（根据 Chrome 调试工具），如下所示：
Access-Control-Request-Headers: Origin, HTTP_X_CUSTOMHEADER, Accept
Access-Control-Request-Method: GET
Origin: http://fiddle.jshell.net
然后（根据 Chrome 调试工具）我的本地服务器返回以下标头：
（手动重新格式化以提高可读性）
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: HTTP_X_CUSTOMHEADER
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Origin: http://fiddle.jshell.net
Access-Control-Max-Age: 10
Cache-Control: no-cache
Connection: Keep-Alive
Content-Length: 1
Content-Type: text/html; charset=utf-8
Date: Wed, 14 Sep 2011 22:42:28 GMT
Server: WEBrick/1.3.1 (Ruby/1.8.7/2010-01-10)
X-Runtime: 2
然后在控制台中我收到如下错误消息：
XMLHttpRequest cannot load http://localhost:3000/foo.json?foo=bar.
Origin http://fiddle.jshell.net is not allowed by Access-Control-Allow-Origin.
但是 Access-Control-Allow-Origin标题看起来相同当我的服务器响应预检请求时。那么我在这个拼图中缺少哪一块呢？
This doesn't seem to work:
$.ajax({
url: "http://localhost:3000/foo.json",
data: { foo: 'bar' },
headers: { 'HTTP_X_CUSTOMHEADER': 'foobar' },
xhrFields: { withCredentials: true }
});
When I run it on jsfiddle, an OPTIONS request (according to the Chrome debug tools) fires off that looks like this:
Access-Control-Request-Headers: Origin, HTTP_X_CUSTOMHEADER, Accept
Access-Control-Request-Method: GET
Origin: http://fiddle.jshell.net
And then (according to the Chrome debug tools) my local server returns the following headers:
(manually reformatted for readability)
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: HTTP_X_CUSTOMHEADER
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Origin: http://fiddle.jshell.net
Access-Control-Max-Age: 10
Cache-Control: no-cache
Connection: Keep-Alive
Content-Length: 1
Content-Type: text/html; charset=utf-8
Date: Wed, 14 Sep 2011 22:42:28 GMT
Server: WEBrick/1.3.1 (Ruby/1.8.7/2010-01-10)
X-Runtime: 2
And then in the console I get an error message like this:
XMLHttpRequest cannot load http://localhost:3000/foo.json?foo=bar.
Origin http://fiddle.jshell.net is not allowed by Access-Control-Allow-Origin.
But the Access-Control-Allow-Origin header appears identical to when my server responded with to the preflight request. So what piece am I missing here of this puzzle?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
OHHHHH，好吧，我终于弄清楚了......
显然，预检 OPTIONS 响应标头并不是唯一需要它们的地方。您还需要在实际内容的响应中包含这些标头。我只在飞行前才看到这些标题，认为这是唯一需要的“票”。
因此，我将相同的标头添加到实际资产的 GET 请求中，现在一切正常。我想我在文档中错过了这一点。
OHHHHH, ok I figured this out, finally...
Apparently the preflight
OPTIONSresponse headers arent the only place that needs them. You need to include those headers on the response for the actual content as well. I only had these headers coming down on the preflight, thinking that was the only "ticket" needed.So I added the same headers to the GET request for the actual asset and everything works great now. I guess I missed that in the docs.
您需要在 Access-Control-Allow-Headers 部分中包含 Origin，因为 Origin 不被视为简单标头（IMO，规范应在简单标头列表中包含 Origin）。
You need to include Origin in the Access-Control-Allow-Headers section, since Origin is not considered a simple header (IMO, the spec should include Origin in the list of simple headers).