JSON 和 AJAX，无法加载，需要 JSONP？

Question

function getJson(){
$.ajax({
type: "GET",
url: "http://echo.jsontest.com/key/value/one/two",
dataType: "json",
success: function(data){
alert("Success.");   
//$('#bigdiv').append(JSON.stringify(data));
},
error: function (jqXHR, exception) {
alert( jqXHR.status );
}
});
}
$("#start").click(function(){
alert("check0");
getJson();
});

https://codepen.io/anon/pen/PjvwPL

我被困在这里，为什么我不能从该 URL 检索数据？

Answer 1

您发布的代码笔将无法使用(至少在 Chrome 中(，因为代码笔使用 https，但请求的资源是 http。但除此之外，您的真正问题可能是它是一个跨域请求，而您的服务器不允许这样做。

XMLHttpRequest cannot load https://zadanie.laboratorium.ee/users.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://s.codepen.io' is therefore not allowed access. The response had HTTP status code 502.

您可能需要在服务器端使用这样的标头才能使其正常工作：

Access-Control-Allow-Origin: https://calling-website.com
Content-Security-Policy: default-src 'self'; frame-ancestors https://calling-website.com

您可能需要更多。您可以在Google开发人员文档中找到更多信息。

Answer 2

这是一个跨协议问题。

Codepen 位于https://URL 上，因此 ajax 和 iframe 调用尝试使用该协议 - 但您的服务器没有配置 https，因此返回"502 Bad Gateway"错误。 按照当前配置，您的数据仅在纯 http://zadanie.laboratorium.ee/users.json URL 上可用。

Answer 3

一些想法：查看跨源策略。

此外，在使用 CodePen 时，请确保您的调用不会因非 HTTPS url 等内容而被阻止。