跨域AJAX預檢失敗原點檢查

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）。