html - 一些 JS 脚本在 Chrome 中加载但在 Firefox 中不加载

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 header 。此 header 意味着 站点 B 可以允许指定的主机在其站点上包含脚本。

站点 B 需要在其服务器上启用 Access-Control-Allow-Origin header ，以允许您访问它。对于单个 url，设置以下 header :

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

编辑

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

Normal script elements pass minimal information to the window.onerror for scripts which do not pass the standard CORS checks. To allow error logging for sites which use a separate domain for static media, several browsers have enabled the crossorigin attribute for scripts using the same definition as the standard img crossorigin attribute. Efforts to standardize this attribute are underway on the WHATWG mailing list.