Jsonp跨域ajax答案

【问题标题】：Jsonp cross-domain ajaxJsonp跨域ajax
【发布时间】：2012-09-06 11:35:23
【问题描述】：

我正在开发一个使用 ajax 调用从服务器获取 html 的应用程序。当我在服务器上运行它时，一切正常。

但是当我在 localhost 上运行时，出现“Access-Control-Allow-Origin”错误。我环顾四周，似乎使用 jsonp 可能是解决方案。

所以，我的 ajax 调用如下所示：

$.ajax({
    url: url,
    dataType: 'jsonp',
    crossDomain: true,
    type: 'GET',
    success: function(data){
        // should put the data in a div
    },
    error: function(){
        //do some stuff with errors
    }
});

我从服务器获取 html，但总是出现这个错误：

Uncaught SyntaxError: Unexpected token <

有没有办法将 jsonp 响应包装在 html 中？

谢谢！

【问题讨论】：

标签： javascript jquery ajax jsonp

【解决方案1】：

您不能使用 JSONP 来获取 HTML 文档。您需要将 HTML 包装在 JavaScript 变量中。 JSONP 有一些非常具体的要求才能使其正常工作，包括回调函数/属性。如果您无法控制托管目标页面的服务器，您将无法使其正常工作。这是一项安全预防措施，可防止随机页面从您通过 AJAX 调用登录的网站窃取您的个人信息。

更新

我更彻底地阅读了您的问题。听起来您的问题是您处于一个没有相关资源的开发环境中。 JSONP 不是答案，因为仅仅为了让您的页面在开发中工作而运行起来很麻烦。您应该创建目标 HTML 的本地副本并使用相对或服务器绝对 URL（例如 "/the/page/i/need.html" 而不是 "http://myserver.com/the/page/i/need.html"）获取它

【讨论】：

@GuillaumeleFloch 您在localhost 上运行您的生产站点？你说它“在服务器上”运行良好。
是的，我首先在服务器上开发了应用程序。但现在，我想把它包装成一个移动应用程序，这就是我在本地主机上测试它的原因..
那么为什么您尝试通过 JSONP 抓取的资源与您抓取它的页面不同的来源（服务器）？
所以我在远程服务器上创建了 html。我使用 django 作为服务器。从这个服务器我做一些 ajax 调用来获取 html 数据并查询我的数据库。但我希望能够从本地主机做到这一点。基本上，我想将我的应用程序包装在 phongap 中。一旦应用程序成为“本机”，调用就不会从我的服务器发送到我的服务器。这就是为什么我希望能够从本地主机获取我的数据
好的，是的，那么你可能在使用 JSONP。但是您需要将 HTML 包装在 JavaScript 中以使其工作。去查找一个 JSONP 教程并按照它的说明进行操作，但是创建一个对象来返回类似于 {"htmlSnippet":"<div><span>...</span></div>"} 的东西。只需确保在 HTML 中转义任何引号即可。

【解决方案2】：

如果你想通过jsonp获取数据，那么服务器端需要支持jsonp。

没有办法只更改dataType 来获取数据。

如果服务器端不支持jsonp，那么你需要在你的localhost中做一个代理。

【讨论】：

事实是，我找回了数据.. 但出现“语法错误”.. 所以所有代码都在客户端.. 但我无法使用它。
@GuillaumeleFloch 是的，你可以从某些意义上取回数据，它一定会导致语法错误，检查 jsonp 是如何工作的。
@GuillaumeleFloch 您收到语法错误的原因是 JSONP 使用动态附加的 <script> 标记来包含目标 JSONP 资源。由于您实际上是在告诉浏览器您的 HTML 页面是 JavaScript 资源，因此它会在尝试将 HTML 解析为 JavaScript 时给您一个 JavaScript 错误。
但是有没有其他方法可以用 jsonp 做点什么？还是一种跨域ajax调用来获取html的方法？
@GuillaumeleFloch 不，请参阅下面的答案。这是一种安全预防措施，在没有 JSONP 资源明确“同意”的情况下绕过它将被视为安全漏洞。