javascript - 脚本的动态加载显示同一 JS 文件的不同行为

Question

在我们的网站上加载 JS SDK 时，我尝试了几种不同的方法。我注意到代码段 1 导致 CORS 错误，而代码段 2 在同一页面 上加载相同的脚本 没有任何问题。

片段 1(使用 document.body.appendChild，抛出 CORS 异常)

 const url = 'https://www.example.com/sdk.js';
 const scriptTag = document.createElement('script');
 scriptTag.setAttribute('crossorigin', 'anonymous');
 scriptTag.setAttribute('src', url);
 document.body.appendChild(scriptTag);

片段 2(使用 parentNode.insertBefore，无 CORS 异常)

 const element = document.getElementsByTagName('script')[0];
 const scriptTag = document.createElement('script');

 scriptTag.async = !0;
 scriptTag.crossorigin = 'anonymous';
 scriptTag.src = 'https://www.example.com/sdk.js';
 element.parentNode.insertBefore(scriptTag, element);

我试图找出每种情况下行为不同的原因，但找不到任何原因。

有人能指出我为什么会看到这种行为吗？

Answer 1

我看到运行您的代码的唯一区别是@Pointy 在评论中指出的点，第一个脚本生成:

<script crossorigin="anonymous" src="https://www.example.com/sdk.js"></script>

第二个:

<script async="" src="https://www.example.com/sdk.js"></script>

在我的控制台上运行，所以 crossorigin 可能对 cors 错误负责。 (同样的事情发生在控制台上，顺便说一句)