JavaScript Access-Control-Allow-Origin标头如何工作？

Question

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

1. 客户端从http：// siteA- origin 下载javascript代码MyCode.js 。
2. MyCode.js的响应标头包含 Access-Control-Allow-Origin：http：// siteB ，我认为这意味着MyCode.js被允许对站点B进行跨域引用。
3. 客户端触发了MyCode.js的某些功能，该功能继而向http：// siteB发出了请求，尽管这是跨域请求，但仍然可以。

可以肯定的是-我仍然不明白我应该如何使用此标头。

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

我不想利用JSONP。

Answer 1

Access-Control-Allow-Origin是CORS（跨源资源共享）标头。

当站点A尝试从站点B获取内容时，站点B可以发送Access-Control-Allow-Origin响应标头以告知浏览器某些原始来源可以访问此页面的内容。（来源是域，再加上方案和端口号。）默认情况下，其他任何来源都无法访问站点B的页面。使用Access-Control-Allow-Origin标头会打开一扇门，可以按特定的请求来源进行跨域访问。

对于站点B希望站点A可以访问的每个资源/页面，站点B应该为其页面提供响应头：

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

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

什么发生在网络层面可以 略微
比上述解释更加复杂。如果该请求是“非简单”请求，则浏览器首先发送一个无数据的“预检”
OPTIONS请求，以验证服务器将接受该请求。当一个（或两个）同时发生时，请求是不简单的：

• 使用GET或POST以外的HTTP动词（例如PUT，DELETE）
• 使用非简单的请求标头；仅有的简单请求标头是：
  • Accept
  • Accept-Language
  • Content-Language
  • Content-Type（当它的值是这仅仅是简单的application/x-www-form-urlencoded，multipart/form-data或text/plain）

如果html" target="_blank">服务器使用与非简单动词和/或非简单头匹配的适当响应头（Access-Control-Allow-Headers对于非简单头，Access- Control-Allow-Methods对于非简单动词）来响应OPTIONS预检，则浏览器将发送实际请求。

假设站点A要发送的PUT请求/somePage，其非简单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预检会获取成功的响应标头：

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

有关非简单请求的更多信息