动态加载脚本对于相同的JS文件显示不同的行为

Question

在我们网站上加载JS SDK时，我尝试了几种不同的方法。我注意到片段1会导致CORS错误，而片段2则将same script加载到same page上而没有任何问题。

代码段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指向的on，第一个脚本生成：

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

第二个：

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

在我的控制台上运行，因此crossorigin可能对cors错误负责。 （同样在控制台上发生的，顺便说一句）