javascript - 'Access-Control-Allow-Origin' header 是如何工作的？

Question

显然，我完全误解了它的语义。我想到了这样的事情:

1. 客户端从 http://siteA - 源下载 JavaScript 代码 MyCode.js。
2. MyCode.js 的响应头包含 Access-Control-Allow-Origin: http://siteB，我认为这意味着允许 MyCode.js对站点 B 进行跨域引用。
3. 客户端触发 MyCode.js 的某些功能，进而向 http://siteB 发出请求，尽管是跨源请求，但应该没问题。

好吧，我错了。它根本不是这样工作的。所以，我读过 Cross-origin resource sharing 并尝试读取 Cross-Origin Resource Sharing in w3c recommendation 。

有一件事是肯定的 - 我仍然不明白我应该如何使用这个 header 。

我对站点 A 和站点 B 都有完全控制权。如何使从站点 A 下载的 JavaScript 代码能够使用此 header 访问站点 B 上的资源？

P.S.:我不想使用JSONP .

Answer 1

Access-Control-Allow-Origin 是 CORS (cross-origin resource sharing) header .

当站点 A 尝试从站点 B 获取内容时，站点 B 可以发送一个 Access-Control-Allow-Origin 响应 header ，告诉浏览器该页面的内容可由某些来源访问。 (来源是 domain, plus a scheme and port number 。)默认情况下，站点 B 的页面是 not accessible to any other origin ;使用 Access-Control-Allow-Origin header 为特定请求来源打开跨域访问之门。

对于站点 B 希望站点 A 访问的每个资源/页面，站点 B 应使用响应 header 为其页面提供服务:

Access-Control-Allow-Origin: http://siteA.com

现代浏览器不会完全阻止跨域请求。如果站点 A 向站点 B 请求页面，浏览器实际上会在网络级别获取所请求的页面，并检查响应 header 是否将站点 A 列为允许的请求者域。如果站点 B 未指示允许站点 A 访问该页面，则浏览器将触发 XMLHttpRequest 的 error 事件，并拒绝向请求的 JavaScript 代码发送响应数据.

非简单请求

网络级别发生的情况可能比上面解释的稍微复杂。如果请求是"non-simple" request ，浏览器首先发送一个无数据的“预检”OPTIONS 请求，以验证服务器是否会接受该请求。当出现以下任一情况(或两者)时，请求就不简单:

• 使用除 GET 或 POST 之外的 HTTP 动词(例如 PUT、DELETE)
• 使用非简单请求 header ；唯一简单的请求 header 是:
• 接受
• 接受语言
• 内容语言
• Content-Type(仅当其值为 application/x-www-form-urlencoded、multipart/form-data 时才简单>，或文本/纯文本)

如果服务器使用适当的响应 header 响应 OPTIONS 预检(对于非简单 header ，Access-Control-Allow-Headers，Access-Control-Allow-Methods对于非简单动词)匹配非简单动词和/或非简单 header ，然后浏览器发送实际请求。

假设站点 A 要发送 /somePage 的 PUT 请求，且非简单的 Content-Type 值为 application/json >，浏览器首先会发送预检请求:

OPTIONS /somePage HTTP/1.1
Origin: http://siteA.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: Content-Type

请注意，Access-Control-Request-Method和Access-Control-Request-Headers是由浏览器自动添加的；您不需要添加它们。此 OPTIONS 预检获取成功的响应 header :

Access-Control-Allow-Origin: http://siteA.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: Content-Type

发送实际请求时(预检完成后)，其行为与处理简单请求的方式相同。换句话说，预检成功的非简单请求将被视为与简单请求相同(即服务器仍必须再次发送 Access-Control-Allow-Origin 以获得实际响应)。

浏览器发送实际请求:

PUT /somePage HTTP/1.1
Origin: http://siteA.com
Content-Type: application/json

{ "myRequestContent": "JSON is so great" }

服务器会发回一个Access-Control-Allow-Origin，就像一个简单的请求一样:

Access-Control-Allow-Origin: http://siteA.com

参见 Understanding XMLHttpRequest over CORS 有关非简单请求的更多信息。