403 禁止响应 JSONP 请求

Posted 2023-03-03

【中文标题】403 禁止响应 JSONP 请求

【英文标题】：403 Forbidden Response to a JSONP request

【发布时间】：2016-08-17 14:00:45

【问题描述】：

第一次发布到***。

我只是想使用 jquery 从 json url 获取数据。 第一个问题是跨源请求块，即使使用应该停止这个问题的库，比如 ajax 跨源 js（很抱歉没有提供这个链接，我太新了，不能在这里有超过 2 个链接），我是仍然没有运气，同样的跨源错误。

所以我转向 JSONP。

url = "http://take-home-test.herokuapp.com/api/v1/works.json?callback=?"
$.ajaxSetup( dataType: "jsonp" );
$.getJSON(url, function(json) 
    console.log(data);
);

（我也尝试过 JSONP 请求的 AJAX 语法）

现在我可以在网络选项卡中看到数据正在返回，但状态是 403 禁止。 pic of the response in the network tab of chrome

我正在使用可以与 npm 一起安装的 http-server，以避免 chrome 出现 json MIME 类型的问题。 这个类似的堆栈溢出答案说我需要为我的框架集成 jsonp 支持，但他们指的是 ruby​​ 的 sinatra。 Why Does JSONP Call Return Forbidden 403 Yet URL can be accessed in a browser 所以我尝试了 npmjs jsonpclient 仍然得到了禁止的响应。

有什么想法吗？这花了我一天多的时间。

【问题讨论】：

该资源是否需要某种身份验证？

我怀疑。此 api 是作为公司带回家面试测试的一部分提供的。

我认为这是 API 端点上的 Access-Control-Allow-Origin 标头的问题。

尝试使用“--cors”选项启动您的服务器。 Aka: node bin/http-server --cors ... 这将通过 Access-Control-Allow-Origin 标头启用 CORS，应该可以解决您的问题。

【参考方案1】：

问题：服务器 (http://take-home-test.herokuapp.com) 没有设置“Access-Control-Allow-Origin”标头。如果您有权访问服务器，请使用“--cors”选项启动它。又名：node bin/http-server --cors ... 这将通过 Access-Control-Allow-Origin 标头启用 CORS，应该可以解决您的问题。

如果您无权访问服务器。这是一个快速的解决方案：通过http://cors.io 代理您的请求。见下文。

url = 'http://take-home-test.herokuapp.com/api/v1/works.json?callback=?';
new_url = "http://cors.io/?u=" + encodeURIComponent( url );

$.ajaxSetup( dataType: "jsonp" );
$.getJSON(new_url, function(json) 
    console.log(json);
);

JSFiddle：http://jsfiddle.net/davemeas/4rt3s7ta/1/（注意：您必须将 jQuery 添加到该小提琴 :)）

【参考方案2】：

感谢 Dave Meas，这是我发现的最简单的代码版本：

url = http://take-home-test.herokuapp.com/api/v1/works.json"
new_url = "http://crossorigin.me/" + url;
$.getJSON(new_url, function(json) 
console.log(json);
);