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

Question

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

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

我得到这样的CORS错误:

从' https://stackoverflow.com ' 访问' https://stackoverflow.com/foo.js '中的脚本已被CORS策略阻止:没有'Access-Control-Allow-Origin'标题出现在要求的资源......

但是,没有该crossorigin='anonymous'属性的相同标记工作正常(当然会生成404错误,因为foo.js不存在).

这是令人惊讶的,因为anonymous它只是为了防止发送任何凭据,并且脚本标签不应该要求CORS.造成这种情况的原因是什么,我该怎么办？

Answer 1

我有一段时间对此感到困惑.这是我现在理解的方式:

根据W3C,其实有3个可能的值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">

但有趣的是,如果跳过属性,则完全禁用 CORS行为crossorigin.例如:

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

此标记将运行脚本而不进行任何与CORS相关的检查.实际上,没有crossorigin属性使浏览器Origin完全跳过HTTP头.

无论你crossorigin是,anonymous或者use-credentials,请求Origin仍然必须匹配响应Access-Control-Allow-Origin.否则没有运气 - 脚本永远不会被解雇.

来源:Mozilla Developer Network上的HTTP访问控制(CORS)

Answer 3

这是一个有点旧的线程，但这是我最近碰巧遇到的事情。除了crossorigin之外，您还应该确保从中加载脚本的服务器（在您的示例中 - stackoverflow.com）返回特定的 header。

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

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

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