javascript - XMLHttpRequest() JSON 抛出网络错误，但类似的 jQuery .getJSON 代码可以工作

Question

我有一个从外部网站加载的 JSON 脚本。在最简单的形式中，代码是这样的(并且可以工作):

jQuery.getJSON("http://adressesok.posten.no/api/v1/postal_codes.json?postal_code=" + document.querySelector("input").value + "&callback=?",
    function(data){
        document.querySelector("output").textContent = data.postal_codes[0].city;
    });

但是，如果不是很重要，网站所有者并不需要 jQuery，因此我将 .getJSON 重新编码为 request = new XMLHttpRequest(); 模型:

request = new XMLHttpRequest();
request.open("GET", "http://adressesok.posten.no/api/v1/postal_codes.json?postal_code=" + document.querySelector("input").value + "&callback=?", true);
request.onload = function() {
    var data = JSON.parse(request.responseText);
    document.querySelector("output").textContent = data.postal_codes[0].city; 
};
request.onerror = function() { /* this gets called every time */ };

我多次修改代码，一遍又一遍地阅读文档，但 .onerror 函数是唯一始终显示的函数。这是控制台:

其中挪威语表示该脚本请求 CORS，它无法在 Access-Control-Allow-Origin 的头部找到来源，并且 XMLHttpRequest 出现网络错误，并显示“无法访问”。

发生这种情况可能有多种原因:

1:新代码有问题

2:.getJSON jQuery 函数中的某些内容(黑客？)可以防止错误发生

3:新代码中有一些重要的东西我忘记添加了

4:我的浏览器有问题(目前为 IE 11)

5:还有别的事吗？

如果能得到一些帮助就太好了。

演示:http://jsbin.com/muxigulegi/1/

Answer 1

这不是网络错误。这是一个跨源错误。请求成功，但浏览器拒绝访问您的 JavaScript 响应。

由于 URL 中有 callback=?，jQuery 将生成 JSONP 请求而不是 XMLHttpRequest 请求。这会将响应作为脚本执行，而不是读取原始数据。

您正在手动创建 XMLHttpRequest，因此由于同源策略而失败。

Create a JSONP request相反。