javascript - 通过动态创建的脚本标签异步加载 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);

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

Answer 1

XMLHttpRequest objects are used for asynchronous data exchange with AJAX. Is it the same object used for asynchronous script loading with dynamic script tags?

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

If so, does the CORS(Cross Origin Resource Sharing) issue applies here too ?

没有。 CORS适用于XHR调用和跨域访问，不适用于通过脚本标签加载脚本。这就是为什么JSONP有效。

当您将 JavaScript 加载到页面中时，无论从何处加载它，它都在加载它的页面的安全上下文中运行。举例来说，如果您有一个页面 http://example.com/foo.html它从 http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js 加载脚本，这很好(这就是 Google 和 Microsoft 等 CDN 的工作原理，允许我们从那里加载通用库，而不是从我们自己的服务器加载)。如果该脚本加载的代码尝试执行 XHR 调用，则适用的源是 http://example.com ，不是http://ajax.googleapis.com 。类似地，如果该脚本尝试从另一个源访问窗口(也许 http://example.com 页面中有一个来自 iframe 的 http://somewhereelse.com )，则同样适用的源是 http://example.com 。因此跨域脚本访问被拒绝。