使用ajax跨域加载.js文件

Posted 2023-03-03

【中文标题】使用ajax跨域加载.js文件

【英文标题】：Loading .js file cross domain using ajax

【发布时间】：2012-11-20 03:52:35

【问题描述】：

我正在尝试使用 ajax 访问跨域 .js 文件：

$.ajax(
    type:'get',
    crossDomain:true,
    url: "http://localhost/62588/scripts/bootStrapper.js",
    contentType: "application/json",
    dataType: 'jsonp'    
).done(callback);

我现在有一个回调：

getBootStrapperScript(function (callback)          
       //do somethibg
)

我收到以下错误：

XMLHttpRequest cannot load http://localhost/62588/scripts/bootStrapper.js. Origin http://localhost:62607 is not allowed by Access-Control-Allow-Origin.

我一直在阅读有关 JSONP 的信息，但我不确定如何使用它从另一个域加载 .js 文件。

如果我将上面的代码更改为使用 'jsonp' 作为数据类型，但我得到了这个错误：

GET http://localhost/62588/scripts/bootStrapper.js?callback=jQuery18206067646441515535_1354459693160&_=1354459696966 404 (Not Found) 

如何加载跨域js文件？

【问题讨论】：

看起来你是同源政策的受害者

这可能对你有帮助，***.com/questions/6114436/…

有一个特殊的函数可以为你做这件事，它叫做$.getScript()，它获取外部的javascript文件并插入它。另一种方法是看看谷歌是如何处理分析文件之类的，在头部插入一个脚本标签，然后做类似的事情。使用带有 jsonp 的 Ajax 调用是不是的方法。

为什么投反对票？真的很感兴趣，所以我可以在未来提供更好的问题:)

谢谢大家 - 请参阅 Darins 回答的评论。

【参考方案1】：

不要使用任何 AJAX，只需使用 $.getScript 函数：

$.getScript('http://localhost/62588/scripts/bootStrapper.js').done(callback);

如您所知，您可以将<script> 标记指向您希望的任何域，而不会违反same origin policy。这就是 JSONP 的基础。但是您不需要任何 JSONP，因为您所需要的只是从远程域中引用一个脚本，这就像将 <script> 标记指向该脚本一样简单，或者如果您想动态地使用 $.getScript jQuery 必须为您提供的功能。

---

更新：

$.getScript 函数会将随机缓存破坏参数附加到 url。如果您想获得脚本的缓存版本，您可以定义一个自定义的 cachedScript 函数，如文档中所示：

jQuery.cachedScript = function(url, options) 
    options = $.extend(options || , 
        dataType: 'script',
        cache: true,
        url: url
    );
    return jQuery.ajax(options);
;

然后：

$.cachedScript('http://localhost/62588/scripts/bootStrapper.js').done(callback);

【讨论】：

谢谢，我仍然收到错误：GET localhost/62588/scripts/bootStrapper.js?_=1354460928278 404（未找到）。 :(

当您在浏览器地址栏中输入http://localhost/62588/scripts/bootStrapper.js?_=1354460928278 时会发生什么？剧本送达了吗？还是你得到404？如果提供的脚本没有错误，我会感到非常惊讶。如果您得到 404，那么，请确保您在 $.getScript 函数中为您的脚本提供了正确的 url - 一个实际存在于您的服务器上指定地址的 URL :-)

是的，404 但只有localhost:62588/Scripts/bootStrapper.js - 脚本已提供。

奇怪，如果有查询字符串参数，您的 Web 服务器不提供脚本？ _=1354460928278 位是为了确保您从服务器获得新版本的脚本。如果您不希望将此随机查询字符串参数附加到 url，您可以设置 cache: false 参数。阅读我在答案中链接到的 $.getScript 函数的文档。最后有一个名为Caching Responses 的部分。查看那里提供的示例。他们定义了一个自定义的jQuery.cachedScript 函数。我已经更新了我的答案以提供一个例子。

其实 - 我是个白痴：真正的原因 - 看看 url：$.getScript('localhost/62588 localhost 后面的 '/' 实际上应该是一个 ':' - 谢谢 Darin。