通过动态创建的脚本标记异步加载JavaScript时CORS问题

Question

像下面这样动态创建脚本将异步下载JavaScript源代码。

var script = document.createElement('script');
script.src = src_url;
var first_script = document.getElementsByTagName('script')[0];
first_script.parentNode.insertBefore(script, first_script);

在AJAX下创建什么类型的请求对象？XMLHttpRequest对象用于与AJAX进行异步数据交换。它是否与使用动态脚本标记加载异步脚本的对象相同？如果是的话，CORS(跨源资源共享)问题也适用于此吗？

Answer 1

XMLHttpRequest对象用于与AJAX进行异步数据交换。它是否与使用动态脚本标记加载异步脚本的对象相同？

不，浏览器只是像一般的脚本一样加载它们。

如果是的话，CORS(跨源资源共享)问题也适用于此吗？

不是的。CORS适用于XHR调用和跨源访问，而不是通过脚本标记加载脚本.这就是为什么JSONP工作的原因。

当您将JavaScript加载到页面中时，您从哪里加载它并不重要，它在加载它的页面的安全上下文中运行。例如，如果您在http://example.com/foo.html上有一个页面，它从http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js加载一个脚本，这很好(这就是CDN如何像谷歌和微软这样的工作，允许我们从那里而不是从我们自己的服务加载公共库)。如果该脚本加载的代码试图执行XHR调用，则应用的来源是http://example.com，而不是http://ajax.googleapis.com。类似地，如果该脚本试图从另一个来源访问窗口(也许http://example.com页面中包含一个来自http://somewhereelse.com的iframe )，那么应用的来源同样是http://example.com，因此跨源脚本访问被拒绝。