Question

首次发布到stackoverflow。

我只是想使用jquery从json url获取数据。第一个问题是交叉原始请求块，即使是应该停止此问题的库，例如ajax cross origin 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支持，但他们指的是rubat的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）没有＆＃39; Access-Control-Allow-Origin＆＃39;标头设置。如果您有权访问服务器，请使用＆＃39; - cors＆＃39;选项。 Aka：节点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添加到那个小提琴:)）

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对JSONP请求的禁止响应

2 个答案: