使用 <script crossorigin='anonymous'>，为什么脚本“被 CORS 策略阻止”？

Question

使用 Google Chrome 或 Firefox，如果我尝试加载以下 HTML：

<script crossorigin='anonymous' src='https://stackoverflow.com/foo.js'></script>

我收到这样的 CORS 错误：

CORS 策略已阻止从源“https://stackoverflow.com”访问“https://stackoverflow.com/foo.js”处的脚本：请求的资源上不存在“Access-Control-Allow-Origin”标头...

但是，没有crossorigin='anonymous' 属性的相同标记可以正常工作（当然会产生 404 错误，因为 foo.js 不存在）。

这令人惊讶，因为anonymous 只是supposed to prevent sending any credentials，而脚本标签are not supposed to require CORS。这是什么原因造成的，我该怎么办？

Answer 1

我有一段时间对此感到困惑。我现在是这样理解的：

According to the W3C，crossorigin 属性实际上有 三个 可能的值：anonymous、use-credentials，以及只能通过省略属性。 （另一方面，一个空字符串映射到 anonymous。）默认值会导致浏览器完全跳过 CORS，这是我所期望的正常行为。

crossorigin 属性仅应在我们关心获取正在加载的脚本的错误信息时使用。由于访问此信息需要 CORS 检查，因此资源上必须存在 Access-Control-Allow-Origin 标头才能加载它。

Answer 2

crossorigin 属性只有两个可能的值：anonymous 或 use-credentials。除了anonymous 之外的任何值，包括空值，都将被转换为anonymous。

所以这三个标签的意思是一样的：

<script src="https://stackoverflow.com/foo.js" crossorigin="anonymous">
<script src="https://stackoverflow.com/foo.js" crossorigin="">
<script src="https://stackoverflow.com/foo.js" crossorigin="IamCrazy">

有趣的是，如果您跳过 crossorigin 属性，CORS 行为将完全禁用。例如：

<script src="https://stackoverflow.com/foo.js">

这个标签将运行脚本而不进行任何与 CORS 相关的检查。实际上，没有crossorigin 属性会使浏览器完全跳过Origin HTTP 标头。

无论您的crossorigin 是anonymous 还是use-credentials，请求的Origin 仍必须与响应的Access-Control-Allow-Origin 匹配。否则没有运气 - 脚本永远不会被触发。

来源：HTTP access control (CORS) on Mozilla Developer Network

Answer 3

这是一个有点旧的线程，但这是我最近偶然发现的。 除了 crossorigin，您还应该确保从中加载脚本的 服务器（在您的示例中 - stackoverflow.com）返回 特定标题。

'Access-Control-Allow-Origin' '*';

只有这样您才能收到有关脚本中发生的错误的完整信息。

当然，如果您确定允许使用哪个 url，则应该使用它而不是 asterix '*'。