如何将“跨源”标记添加到动态加载的脚本中

How do I add the "crossorigin" tag to a dynamically loaded script?

本文关键字：动态 加载 脚本 添加 跨源      更新时间：2023-09-26

上下文：引用 Mozilla 文档：

普通脚本标记会将最少的信息传递给窗口。onerror 对于未通过标准 CORS 检查的脚本。允许错误 记录对静态媒体使用单独域的站点， 多个浏览器为脚本启用了跨源属性 使用与标准 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 请求，因此有一些解决方法，但现在我很好奇是否可以在动态脚本标签上添加跨源标签。

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

这：

script.crossorigin = 'anonymous';

应该是这样的：

script.crossOrigin = 'anonymous';

请注意大写字母"O"。该属性在 HTML 中不大写，但在 JS 接口中大写。很高兴知道！

令人尴尬，但我决定将我的错误永垂不朽，而不是删除这个问题，以防其他人提出同样的问题。

相关文章：