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

客户端从下载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。


当前回答

使用React和Axios,将代理链接连接到URL,并添加标头,如下所示:

https://cors-anywhere.herokuapp.com/+您的API URL

只需添加代理链接即可,但它也可能再次引发“无访问”错误。因此,最好添加一个标题,如下所示。

axios.get(`https://cors-anywhere.herokuapp.com/[YOUR_API_URL]`,{headers: {'Access-Control-Allow-Origin': '*'}})
      .then(response => console.log(response:data);
  }

警告:不得用于生产

这只是权宜之计。如果你在纠结为什么你不能得到回应,你可以使用这个。但这同样不是生产的最佳答案。

其他回答

跨源资源共享-CORS(A.K.A.跨域AJAX请求)是大多数web开发人员可能遇到的问题,根据同源策略,浏览器在安全沙盒中限制客户端JavaScript,通常JS无法直接与来自不同域的远程服务器通信。过去,开发人员创建了许多复杂的方法来实现跨域资源请求,最常用的方法是:

使用Flash/SSilverlight或服务器端作为“代理”进行通信使用遥控器。带填充的JSON(JSONP)。在iframe中嵌入远程服务器,并通过fragment或window.name进行通信,请参阅此处。

这些棘手的方法或多或少都有一些问题,例如,如果开发人员简单地“评估”JSONP,JSONP可能会导致安全漏洞,而上面的第3条,虽然它有效,但两个域之间应该建立严格的契约,它既不灵活也不优雅IMHO:)

W3C引入了跨源资源共享(CORS)作为标准解决方案,以提供一种安全、灵活和推荐的标准方式来解决这个问题。

机制

从高层次上讲,我们可以简单地将CORS视为来自域a的客户端AJAX调用与域B上托管的页面之间的契约,典型的跨源请求/响应将是:

DomainA AJAX请求标头

Host DomainB.com
User-Agent Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.0) Gecko/20100101 Firefox/4.0
Accept text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8,application/json
Accept-Language en-us;
Accept-Encoding gzip, deflate
Keep-Alive 115
Origin http://DomainA.com 

DomainB响应标头

Cache-Control private
Content-Type application/json; charset=utf-8
Access-Control-Allow-Origin DomainA.com
Content-Length 87
Proxy-Connection Keep-Alive
Connection Keep-Alive

上面我标记的蓝色部分是核心事实,“Origin”请求头“表示跨源请求或飞行前请求的来源”,“Access Control Allow Origin”响应头表示此页面允许来自DomainA的远程请求(如果值为*,则表示允许来自任何域的远程请求)。

如上所述,W3建议浏览器在提交实际的跨源HTTP请求之前实现一个“预飞行请求”,简而言之,这是一个HTTP OPTIONS请求:

OPTIONS DomainB.com/foo.aspx HTTP/1.1

如果foo.aspx支持OPTIONS HTTP动词,它可能会返回如下响应:

HTTP/1.1 200 OK
Date: Wed, 01 Mar 2011 15:38:19 GMT
Access-Control-Allow-Origin: http://DomainA.com
Access-Control-Allow-Methods: POST, GET, OPTIONS, HEAD
Access-Control-Allow-Headers: X-Requested-With
Access-Control-Max-Age: 1728000
Connection: Keep-Alive
Content-Type: application/json

只有当响应包含“Access Control Allow Origin”且其值为“*”或包含提交CORS请求的域时,通过满足此强制条件,浏览器才会提交实际的跨域请求,并将结果缓存在“Preflight result cache”中。

三年前,我在博客中写到了CORS:AJAX跨源HTTP请求

如果您正在使用PHP,请尝试在PHP文件的开头添加以下代码:

如果您使用的是localhost,请尝试以下操作:

header("Access-Control-Allow-Origin: *");

如果您正在使用外部域(如服务器),请尝试以下操作:

header("Access-Control-Allow-Origin: http://www.website.com");

如果您只想测试浏览器阻止您请求的跨域应用程序,那么您可以在不安全模式下打开浏览器并测试应用程序,而不更改代码,也不使代码不安全。

在macOS中,您可以从终端行执行此操作:

open -a Google\ Chrome --args --disable-web-security --user-data-dir

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”

使用React和Axios,将代理链接连接到URL,并添加标头,如下所示:

https://cors-anywhere.herokuapp.com/+您的API URL

只需添加代理链接即可,但它也可能再次引发“无访问”错误。因此,最好添加一个标题,如下所示。

axios.get(`https://cors-anywhere.herokuapp.com/[YOUR_API_URL]`,{headers: {'Access-Control-Allow-Origin': '*'}})
      .then(response => console.log(response:data);
  }

警告:不得用于生产

这只是权宜之计。如果你在纠结为什么你不能得到回应,你可以使用这个。但这同样不是生产的最佳答案。