Question

我的网站上有一些外部脚本存在一些奇怪的问题。我终于把它归结为这个片段。

<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js" onload="console.log('conversion')"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" onload="console.log('jquery')"></script>

在firefox中加载它只有第二个脚本加载，而使用chrome，都加载。这是在OSX上使用最新的浏览器。

现在，如果我将crossorigin属性添加到这两个脚本中，那么它会停止使用chrome并显示此错误Script from origin 'http://www.googleadservices.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.example.com:3000' is therefore not allowed access.

现在的脚本是

<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js" onload="console.log('12123')" crossorigin async></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" onload="console.log('123')" async crossorigin></script>

我对这种行为上的差异感到震惊。这是因为firefox比CHrome更严格吗？这是我设置的地方吗？或者这是Firefox / Chrome的一个错误？

另外，我是否应该与供应商讨论为CORS设置js？令我印象深刻的是谷歌失败了，但我还有另一个资源破裂。

右MDN声明 script标记不受相同原始政策的限制。

Answer 1

存在跨域资源共享策略，以防止Site A获取Site B上托管的脚本或数据，并将其包含在自己的网站上。如果站点A希望允许站点B访问这些脚本，则可以设置 Access-Control-Allow-Origin 标头。此标头意味着Site B可以允许指定的主机在其站点上包含脚本。

Site B需要在其服务器上启用Access-Control-Allow-Origin标头，以允许您访问它。对于单个网址，请设置以下标头：

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

修改

crossorigin属性不允许不同的起源使用脚本，它只是以不同的方式处理window.onerror。来自MDN页面：

普通脚本元素将最少的信息传递给window.onerror 对于未通过标准CORS检查的脚本。允许错误记录为静态媒体使用单独域的站点，几个浏览器为脚本启用了crossorigin属性使用与标准img crossorigin属性相同的定义。 WHATWG正在努力使这一属性标准化邮件列表。

Answer 2

如果存在脚本属性，则还需要存在HTTP标头。基本上这适用于两种浏览器。

脚本标记crossorigin属性尚未成为标准，但CORS实现应该是。见这里：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-crossorigin

我相信您所看到的是WebKit CORS实施中的错误。前一段时间有一个错误提到了类似的问题，我不认为他们会跟进。请参阅WebKit bug 107389

查看每个标题时，您可以看到googleadservices没有发送任何可能导致Chrome无法加载资源的CORS信息。这就是Firefox所做的，但Chrome似乎要求该属性正确阻止。

curl -i＆＃34; https://www.googleadservices.com/pagead/conversion.js＆＃34;

HTTP/1.1 200 OK
P3P: policyref="https://www.googleadservices.com/pagead/p3p.xml", CP="NOI DEV PSA PSD IVA IVD OTP OUR OTR IND OTC"
Content-Type: text/javascript; charset=ISO-8859-1
Date: Mon, 22 Feb 2016 05:10:29 GMT
Expires: Mon, 22 Feb 2016 05:10:29 GMT
Cache-Control: private, max-age=86400
X-Content-Type-Options: nosniff
Content-Disposition: attachment; filename="f.txt"
Server: cafe
X-XSS-Protection: 1; mode=block
Alternate-Protocol: 443:quic,p=1
Alt-Svc: quic=":443"; ma=2592000; v="30,29,28,27,26,25"
Accept-Ranges: none
Vary: Accept-Encoding
Transfer-Encoding: chunked

curl -i https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js

HTTP/1.1 200 OK
Vary: Accept-Encoding
Content-Type: text/javascript; charset=UTF-8
Access-Control-Allow-Origin: *
Timing-Allow-Origin: *
Date: Tue, 16 Feb 2016 17:29:02 GMT
Expires: Wed, 15 Feb 2017 17:29:02 GMT
Last-Modified: Fri, 16 Oct 2015 18:27:31 GMT
X-Content-Type-Options: nosniff
Server: sffe
X-XSS-Protection: 1; mode=block
Cache-Control: public, max-age=31536000, stale-while-revalidate=2592000
Age: 475251
Alternate-Protocol: 443:quic,p=1
Alt-Svc: quic=":443"; ma=2592000; v="30,29,28,27,26,25"
Accept-Ranges: none
Transfer-Encoding: chunked

Answer 3

你可以尝试添加＆＃34; http：＆＃34;在脚本标记的src属性中。

<script type="text/javascript" src="http://www.googleadservices.com/pagead/conversion.js" onload="console.log('conversion')"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" onload="console.log('jquery')">

一些JS脚本在Chrome中加载但在Firefox中没有

3 个答案:

修改