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

客户端从下载JavaScript代码MyCode.jshttp://siteA-原产地。MyCode.js的响应标头包含Access Control Allow Origin:http://siteB,我认为这意味着允许MyCode.js对站点B进行跨源引用。客户端触发MyCode.js的一些功能,进而向http://siteB,这应该可以,尽管是跨源请求。

嗯,我错了。它根本不是这样工作的。所以,我已经阅读了跨源资源共享,并尝试阅读w3c推荐中的跨源资源分享。

有一点是肯定的——我仍然不明白我应该如何使用这个标题。

我完全控制站点A和站点B。如何使从站点A下载的JavaScript代码使用此标头访问站点B上的资源?

备注:我不想使用JSONP。


当前回答

注:仅用于测试的临时解决方案

对于那些无法控制“选项405方法不允许”的后端的人,这里有一个解决方案,用于“颜色”浏览器。

在命令行中执行:

“C:\Program Files(x86)\Google\Chrome\Application\Chrome.exe”--禁用web安全--用户数据dir=“path_to_file”

例子:

“C:\Program Files(x86)\Google\Chrome\Application\Chrome.exe”--禁用web安全--用户数据dir=“C:\Users\vital\AppData\Local\Google\Cherme\user data\Profile 2”

其他回答

Nginx和Apache

作为apsiller答案的补充,我想添加一个wiki图表,显示请求是否简单(OPTIONS航班前请求是否发送)

对于一个简单的请求(例如,热链接图像),您不需要更改服务器配置文件,但您可以像Melvin Guerrero在回答中提到的那样在应用程序(托管在服务器上,例如,在PHP中)中添加头标,但请记住:如果您在服务器(配置)中添加完整的CORS头标,同时在应用程序中允许简单的CORS(例如,PHP),这根本行不通。

下面是两种常用服务器的配置:

打开Nginx上的CORS(Nginx.conf文件)位置~^/index\.php(/|$){...add_header'访问控制允许来源'“$http_Origin”始终;#如果您将“$http_origin”更改为“*”,您将得到相同的结果-允许所有域使用CORS(但最好将其更改为您的特定域)add_header“访问控制允许凭据”“始终为true”;if($request_method=OPTIONS){add_header'访问控制允许来源'“$http_Origin”;#请勿移除该行(用上面的外部“if”加倍)add_header'访问控制允许凭据''true';add_header'访问控制最大年龄'1728000;#缓存20天的飞行前值add_header'访问控制允许方法''GET,POST,OPTIONS';#任意方法add_header'访问控制允许标头''我的第一个标头,我的第二个标头,授权,内容类型,接受,来源';#任意标头add_header“内容长度”0;add_header“内容类型”“text/plain charset=UTF-8”;返回204;}}在Apache上打开CORS(.htaccess文件)# ------------------------------------------------------------------------------#|跨域Ajax请求|# ------------------------------------------------------------------------------#启用跨源Ajax请求。# http://code.google.com/p/html5security/wiki/CrossOriginRequestSecurity# http://enable-cors.org/#将下面的*(允许任何域)更改为您的域标题集访问控制允许来源“*”标头始终设置访问控制允许方法“POST、GET、OPTIONS、DELETE、PUT”标头始终设置访问控制允许标头“My First Header,My Second Header,Authorization,content type,csrf token”标头始终将访问控制允许凭据设置为“true”

根据我自己的经验,很难找到一个简单的解释,为什么CORS甚至是一个问题。

一旦你明白了为什么会出现,标题和讨论就会变得更加清晰。我会在几行字里尝试一下。


都是关于饼干的。Cookie按其域存储在客户端上。

一个例子:在你的电脑上,有一个你的bank.com的cookie。也许你的会话就在那里。

要点:当客户端向服务器发出请求时,它将发送存储在该请求的域下的cookie。

您已在浏览器上登录到yourbank.com。您请求查看您的所有帐户,并为yourbank.com发送cookie。yourbank.com收到一堆cookie,并发回其响应(您的帐户)。

如果另一个客户机向服务器发出跨源请求,则会像以前一样发送这些cookie。如罗。

你浏览到malicious.com。malicious向不同的银行发出一系列请求,包括yourbank.com。

由于cookie按预期进行了验证,服务器将授权响应。

这些饼干被收集起来并一起发送——现在,malious.com收到了您银行的回复。

诶呀


现在,一些问题和答案变得显而易见:

“我们为什么不阻止浏览器这样做?”是的。这是CORS。“我们怎么解决?”让服务器告诉请求CORS正常。

根据Mozilla开发者网络的这篇文章,

当资源从不同于第一个资源本身服务的域或端口请求资源时,它会发出跨源HTTP请求。

来自的HTML页面http://domain-a.com对发出<img>src请求http://domain-b.com/image.jpg.今天,网络上的许多页面从不同的域加载CSS样式表、图像和脚本等资源(因此应该很酷)。

同源政策

出于安全原因,浏览器限制从脚本中发起的跨源HTTP请求。例如,XMLHttpRequest和Fetch遵循相同的源策略。因此,使用XMLHttpRequest或Fetch的web应用程序只能向自己的域发出HTTP请求。

跨源资源共享(CORS)

为了改进web应用程序,开发人员要求浏览器供应商允许跨域请求。

跨源资源共享(CORS)机制为web服务器提供跨域访问控制,从而实现安全的跨域数据传输。现代浏览器在API容器(如XMLHttpRequest或fetch)中使用CORS来降低跨源HTTP请求的风险。

CORS的工作原理(Access Control Allow Origin标头)

维基百科:

CORS标准描述了新的HTTP头,它为浏览器和服务器提供了一种只有在他们有权限时才请求远程URL的方式。

虽然服务器可以执行一些验证和授权,但浏览器通常有责任支持这些标头并遵守它们施加的限制。

实例

浏览器发送OPTIONS请求和Origin HTTP头。

此标头的值是为父页提供服务的域。当页面来自http://www.example.com尝试访问service.example.com中的用户数据时,将向service.example.com:

Origin: http://www.example.com

service.example.com上的服务器可能会响应:

其响应中的访问控制允许源站(ACAO)标头指示允许哪些源站。例如:访问控制允许来源:http://www.example.com如果服务器不允许跨源请求,则显示错误页面带有通配符的访问控制允许来源(ACAO)标头,允许所有域:访问控制允许来源:*

我无法在后端服务器上配置它,但通过浏览器中的这些扩展,它对我很有用:

对于Firefox:

CORS无处不在

对于Google Chrome:

允许CORS:访问控制允许源

注意:CORS适用于此配置:

大多数CORS问题是因为您试图通过客户端ajax从前端基本库react、angular、jquery应用程序请求。

您必须从后端应用程序请求。

您正在尝试从前端API请求,但您尝试使用的API期望此请求来自后端应用程序,并且它永远不会接受客户端请求。