403 Forbidden 对 JSONP 请求的响应

Question

第一次发布到 Whosebug。

我只是想使用 jquery 从 json url 获取数据。第一个问题是跨源请求块，即使库应该阻止这个问题，比如 ajax 跨源 js（抱歉不提供这个 link，我太新了，没有更多2 links），我仍然没有运气，同样的交叉原点错误。

所以我转向了 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 forbidden。 pic of the response in the network tab of chrome

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

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

Answer 1

问题：服务器 (http://take-home-test.herokuapp.com) 没有设置 'Access-Control-Allow-Origin' header。如果您有权访问服务器，请使用“--cors”选项启动它。又名：node bin/http-server --cors ...这将通过 Access-Control-Allow-Origin header 启用 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 添加到 fiddle :)）

Answer 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);
});

403 Forbidden 对 JSONP 请求的响应

403 Forbidden Response to a JSONP request

javascript

jquery

json

jsonp

node.js