从单页应用程序调用外部 REST Web 服务答案

【问题标题】：Calling external REST web service from Single Page Application从单页应用程序调用外部 REST Web 服务
【发布时间】：2014-04-30 09:30:39
【问题描述】：

我正在使用 Backbone & Underscore JS 创建一个 SPA。该应用程序的基本功能是在输入搜索词时，它需要触发外部 REST Web 服务调用并获取 JSON 响应。但是，当我尝试此操作时，浏览器会取消请求，因为我猜它会尝试进行跨域 AJAX 调用。

我在本地托管此 SPA，而 REST Web 服务托管在外部服务器上。如果我需要进行跨域调用，我需要遵循什么程序而不在服务器端进行任何更改？我听说 JSONP 是一种替代方案，但不确定方法。

【问题讨论】：

标签： rest backbone.js single-page-application

【解决方案1】：

看起来和这个问题一样。它非常有用：

JSONP and Backbone.js

【讨论】：

【解决方案2】：

如果您的外部服务已经支持它，那么您是正确的，JSONP 将成为跨域请求的方式，而无需在服务器端进行任何更改。我假设你正在使用 jQuery。这是 jQuery 文档中的一个示例：

var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
  $.getJSON( flickerAPI, {
    tags: "mount rainier",
    tagmode: "any",
    format: "json"
  })
    .done(function( data ) {
        console.log(data);
    });

您会注意到 flickr URL 中的?jsoncallback=?。这告诉 flickr 将响应包装在 JSONP 回调中，而不是仅仅返回普通的 JSON。当 flickr 看到时，他们会像这样包装响应：

jQuery19104044632513541728_1395560629443({
        "title": "Recent Uploads tagged mountrainier",
                ...other json data...
});

因此，他们没有返回 JSON，而是将其包装在 jQuery 放在全局窗口对象上的函数调用中。该函数调用将使用 json 数据调用您的成功函数。

幸运的是，您不必了解它的内部工作原理。您只需调用 $.getJSON 即可！

【讨论】：