通过动态创建的脚本标签异步加载 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 和微软这样的 CDN 的工作方式，允许我们从那里而不是从我们自己的服务器加载公共库）。如果该脚本加载的代码尝试执行 XHR 调用，则适用的来源是 http://example.com，而不是 http://ajax.googleapis.com。类似地，如果该脚本试图从另一个来源访问 window（也许 http://example.com 页面中有一个来自 http://somewhereelse.com 的 iframe），再次应用的来源是 http://example.com 因此跨源脚本访问被拒绝。

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

CORS issue with asynchronously loaded JavaScript through dynamically created script tags

html

javascript

ajax

xmlhttprequest

cors