Question

这似乎不起作用：

$.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标题看起来与我的服务器响应预检请求时相同。那么我在这里想到的这个难题是什么？

Answer 1

OHHHHH，好吧，我终于明白了......

显然，预检OPTIONS响应标头不是唯一需要它们的地方。您还需要在实际内容的响应中包含这些标头。我只是将这些标题记录在预检上，认为这是唯一需要的“票证”。

所以我为实际资产的GET请求添加了相同的标题，现在一切都很好。我想我在文档中错过了。

Answer 2

您需要在Access-Control-Allow-Headers部分中包含Origin，因为Origin不被视为简单的标题（IMO，规范应该包括简单标题列表中的Origin）。

跨域AJAX预检失败原点检查

2 个答案: