Access-Control-Allow-Origin 标头不起作用 - 我做错了什么？答案

【问题标题】：Access-Control-Allow-Origin header not working - What am I doing wrong?Access-Control-Allow-Origin 标头不起作用 - 我做错了什么？
【发布时间】：2012-08-09 15:25:00
【问题描述】：

我正在尝试使用 Access-Control-Allow-Origin 标头来提供对 HTTP OPTIONS 方法的响应，该标头复制了请求中 Origin 标头的内容。

这显然行不通，原因我不知道。

tl;博士： OPTIONS 的回复说：

Access-Control-Allow-Origin: http://10.0.0.105:9294

后续的 GET 有：

Origin:http://10.0.0.105:9294

Chrome 说：

Origin http://10.0.0.105:9294 is not allowed by Access-Control-Allow-Origin

不是吗？

更多细节...

通过查看 Chrome 的开发者工具窗口，请求标头是：

OPTIONS /user/kris HTTP/1.1
Host: 10.0.0.104:8080
Connection: keep-alive
Access-Control-Request-Method: GET
Origin: http://10.0.0.105:9294
User-Agent: Mozilla/5.0 (X11; Linux i686) AppleWebKit/537.1 (KHTML, like Gecko) Chrome/21.0.1180.75 Safari/537.1
Access-Control-Request-Headers: origin, x-requested-with, content-type, accept
Accept: */*
Referer: http://10.0.0.105:9294/
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-GB,en-US;q=0.8,en;q=0.6
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3

响应头是：

HTTP/1.0 200 OK
Date: Mon, 13 Aug 2012 11:23:45 GMT
Server: WSGIServer/0.1 Python/2.7.3
Content-Length: 0
Access-Control-Allow-Methods: GET, PUT, POST, DELETE, HEAD, OPTIONS
Access-Control-Max-Age: 10
Access-Control-Allow-Origin: http://10.0.0.105:9294
Access-Control-Allow-Headers: X-Requested-With, Authorization, X-Huzu-User, Content-Type, Accept
Content-Type: text/html; charset=UTF-8

在 jQuery 发送其 OPTIONS 请求并获得上述响应后，发生了 2 件奇怪的事情。 OPTIONS 响应（即 200）在开发者控制台中显示为错误：

OPTIONS http://10.0.0.104:8080/user/kris 200 (OK)

之后 GET 请求被拒绝。控制台报错：

XMLHttpRequest cannot load http://10.0.0.104:8080/user/kris. Origin http://10.0.0.105:9294 is not allowed by Access-Control-Allow-Origin.

我不明白为什么不这样做。我做错了什么？

【问题讨论】：

我没有一个最小的 jQuery 代码失败示例，可以在此处发布。假设 javascript 代码没有什么奇怪的，即它只是一个 jQuery get()，导致上面发布了 OPTIONS 请求。我的问题是：响应有什么问题？
是我自己还是host url (10.0.0.104:8080) 和referer url (10.0.0.105:9294/) 之间有区别？
@rene 是的。我的服务器是在我的本地机器（10.0.0.104:8080）上运行的 python wsgi 应用程序，跨站点测试是从我从 10.0.0.105:9294 加载的页面进行的。我不知道referer对访问控制有什么影响。你觉得有关系吗？如果是这样，我该怎么办？
如果您在 10.0.0.4 中启动浏览器，则无法从 10.0.0.105 加载。此标头还应具有 10.0.0.4:8080 作为允许的地址： Access-Control-Allow-Origin: 10.0.0.105:9294
@rene: 10.0.0.104:8080 不是请求的来源。它是服务器本身。 javascript 是从 10.0.0.105:9294 加载的，所以这就是来源。还是我完全误解了？将尝试在 10.0.0.105 上使用浏览器，看看是否有帮助。顺便说一句，我认为某些浏览器 (FF) 只接受该标头中的单个主机。

标签： jquery http http-headers cors http-options-method

【解决方案1】：

好的，我想我明白了。似乎有必要正确处理飞行前 OPTIONS 请求，但不足够跨站点资源请求工作。

在 OPTIONS 请求返回满意的标头后，对同一 URL 的任何后续请求的所有响应也必须具有必要的“Access-Control-Allow-Origin”标头，否则浏览器会吞掉它们，它们甚至不会出现在调试器窗口中。

所以它会看起来由于 OPTIONS 响应中的一些问题，浏览器取消了请求，但实际上，浏览器正在查看来自真实请求的响应标头，然后拒绝它们。

【讨论】：

既然你已经完成了你的查询，你能帮我解决这个类似的问题吗？ stackoverflow.com/questions/11953132/…
@scav +1 感激不尽。您为我节省了数小时的调试时间！
如果您在实际响应中设置的 Access-Control-Allow-Origin:* 与飞行前 OPTIONS 请求中使用的不完全匹配，也会失败。我不小心在 asp dot net 中添加了两次，一次在 IIS 配置中，一次在页面加载代码中，这意味着 Access-Control-Allow-Origin:* 在飞行前选项中发生了一次，但在实际响应中发生了两次，因此 Chrome 取消了它。
只是第二个... Chrome（当前为 v33）似乎要求 304 响应也具有 Access-Control-Allow-Origin: * 等标头，而不仅仅是初始选项响应。 Firefox (v27) 似乎不介意
工作愉快 - 我有一个文件请求另一个文件，设置两个标题解决了问题:)

【解决方案2】：

您应该添加 Access-Control-Allow-Methods 标头以及 Access-Control-Allow-Origin

对于通配符，访问添加下面的标题

   res.header("Access-Control-Allow-Origin", "*");
   res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
   res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');

对于允许的任何特定来源，添加它来代替 *。

【讨论】：