javascript - 跨域GET请求，浏览器和本地主机调用的区别

Question

我尝试从本地托管的 meteor 应用程序(=> 应用程序运行于:http://localhost:3000/)向 API 发出 GET 请求，这样做时出现错误:

“XMLHttpRequest 无法加载 [the-api-url]。请求的资源上不存在“Access-Control-Allow-Origin” header 。因此，来源 http://localhost:3000不允许访问。”

然而，当我将 [the-api-url] 粘贴到浏览器中并按 ENTER 键时，相应的 API 响应将显示在我的浏览器窗口中(一个小的 JSON 对象)。我读过一些关于跨域请求问题的其他帖子，但我不明白解决方案，也不明白从我的代码或从浏览器发送 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 :”。但是上面提到的不正确的响应仍然会记录到控制台，所以我不明白该语法错误何时发生或在哪里发生。

Answer 1

同源策略不包括您在地址栏中输入的内容。如果是这样，您实际上根本无法访问任何网站，除非它保存在您的本地计算机上!

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