如何将“crossorigin”标签添加到动态加载的脚本中？

Posted 2023-03-03

【中文标题】如何将“crossorigin”标签添加到动态加载的脚本中？

【英文标题】：How do I add the "crossorigin" tag to a dynamically loaded script?

【发布时间】：2015-05-08 04:45:54

【问题描述】：

上下文：To quote the Mozilla documentation:

普通脚本标签会将最少的信息传递给 window.onerror 对于未通过标准 CORS 检查的脚本。允许错误 记录使用单独域作为静态媒体的站点， 一些浏览器已经为脚本启用了 crossorigin 属性 使用与标准 img 跨域属性相同的定义。

自从我们将 javascript 移至 CDN 后，我们就意识到我们的脚本一直受到这个问题的困扰。我们在脚本标签中添加了crossorigin 属性，这对于“硬编码”脚本标签效果很好，但是我们动态加载了一些脚本，我不知道如何将crossorigin 标签添加到这些脚本中。

在 Chrome 40 中： 如果我使用 Javascript 动态添加脚本标签，如下所示：

var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.charset = 'utf-8';
script.crossorigin = 'anonymous';
script.src = some_url_on_another_domain;
head.appendChild(script);

我希望将跨域标记添加到插入到我的文档中的脚本标记中。但是，当我在开发者工具中检查脚本标签时，它显然不存在。 （并且我可以验证在请求脚本时没有在请求标头中设置 origin 标头。）

目前，我转而使用这些跨域脚本的 ajax 请求，因此有一些解决方法，但现在我很好奇是否可以在动态脚本标签上添加跨域标签。

【参考方案1】：

好吧，我发现了我的问题。

这个：

script.crossorigin = 'anonymous';

应该是这样的：

script.crossOrigin = 'anonymous';

注意大写的“O”。该属性在 html 中不大写，但在 JS 界面中大写。很高兴知道！

尴尬，但我决定让我的错误永垂不朽，而不是删除问题，以防其他人犯同样的问题。

【讨论】：

script.setAttribute('crossorigin', 'anonymous'); 和 script.setAttribute('crossOrigin', 'anonymous'); 也有效

很棒的发现！愚蠢的区分大小写的javascript。

我也中了这个陷阱。我应该参考HTMLScriptElement 的文档而不是<script> 的文档。