跨域 GET 请求，浏览器和本地主机之间的区别进行调用答案

【问题标题】：Cross-domain GET request, difference between browser and localhost making the call跨域 GET 请求，浏览器和本地主机之间的区别进行调用
【发布时间】：2014-06-19 16:18:59
【问题描述】：

我尝试从本地托管的流星应用程序 (=> App running at: http://localhost:3000/) 向 API 发出 GET 请求，但这样做时出现错误：

“XMLHttpRequest 无法加载 [the-api-url]。请求的资源上没有 'Access-Control-Allow-Origin' 标头。因此不允许访问 Origin http://localhost:3000。”

然而，当我将 [the-api-url] 粘贴到浏览器中并按 ENTER 时，相应的 API 响应会显示在我的浏览器窗口中（一个小的 JSON 对象）。我已经阅读了一些关于跨域请求问题的其他 SO 帖子，但我不明白解决方案，或者从我的代码或从浏览器发送 GET 之间有什么区别。有人可以解释为什么会发生这种行为，以及我的代码/设计的适当更改是什么？我现有的代码如下：

$.ajax({
  type: "get",
  url: auth_ad_act_url,
  data: {
    ads_token: ACCESS_TOKEN
  },
  dataType: 'jsonp',
  success: function(data, status) {
    console.log(data);
  }
});

编辑：我做了一个“get”类型的 jQuery.ajax()，提供了一个 URL、参数对象和成功回调函数，以及 dataType 'jsonp' 来处理跨域请求。

我发布了新代码。现在的错误是响应不正确。（我知道这一点是因为它可以在我的浏览器中运行，并且响应与 API 文档一致）。响应是“资源解释为脚本，但使用 MIME 类型 text/html 传输：https://host.com/apps/[my-app-id]/authorize_ad_account?callbac...”但它应该是一个带有键 'url' 和其他东西的对象。当我包含“jsonp”时，我还会收到错误“Uncaught SyntaxError: Unexpected token :”。但是上面提到的那个不正确的响应仍然被记录到控制台，所以我不明白那个语法错误是什么时候发生的，或者发生在哪里。

【问题讨论】：

MDN Same Origin Policy

标签： javascript jquery ajax get cross-domain

【解决方案1】：

同源政策不包括您在地址栏中键入的内容。如果是这样，除非将其保存在本地计算机上，否则您根本无法访问任何网站！

在您的情况下，为了从 jQuery 的 get 中获取您需要的资源，您需要使用托管在匹配域上的服务器端代理，或者由于您正在使用 JSON，请查看您的 API '正在使用支持 JSONP。

【讨论】：

【解决方案2】：

有可能通过跨域请求获取 JSON 数据。您必须使用 JSONP 并定义一个回调方法，该方法必须在调用和 JSON 数据中。

您的要求：

$.ajax({
    type: "GET",
    url: auth_ad_act_url + "&callback=?",
    jsonpCallback: "jsonCallback",
    dataType: "jsonp",
    success: function(data) {
        // Do something with the data
    }
)};

外部服务器上的 JSON 文件：

jsonCallback(INSERT_HERE_THE_JSON_DATA);

如果您无法在外部服务器上添加 jsonCallback，请查看CORS。

【讨论】：

我请求的 URL 是别人的 API，所以我不能对他们的代码做任何事情，比如插入那个 jsonCallback。上面提到的这个代理业务是什么？我简要阅读了这意味着什么，但我不确定它在代码方面意味着什么。