通过动态创建的脚本标记异步加载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个对象用于与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页面中有iframe来自http://somewhereelse.com），那么适用的原点是http://example.com因此，跨域脚本访问被拒绝。