Question

感谢您抽出宝贵时间阅读我的问题！

我花了几天时间试图解决AJAX请求问题。在Stack Overflow上阅读了几十个答案后，我似乎无法找到解决方案。请帮忙。

我正在尝试使用XMLHttpRequest方法和vanilla JavaScript发出请求，以便从Dark Sky提供的API接收JSON格式的数据。这是我尝试发送请求的URI（在这里公开我的密钥不是问题）Link to a sample API request

问题是我一直收到CORS错误。以前，我已经用JSONP请求克服了这个问题，但这次我试图了解是否有办法避免使用JSONP。

我尝试过使用标头，并在控制台中删除了CORS错误。但是，在响应中，请求后没有发送数据。这是浏览器在没有导致CORS错误的任何标头的情况下发出的请求：

function CallAjax() {

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.darksky.net/forecast/166731d8eab28d33a26c5a51023eff4c/43.11201,-79.11857", true);
xhr.onload = function () {
    console.log(xhr.responseText);
    alert("sucuess");
};
xhr.send();
}

CallAjax();

有没有办法调用API不会自动响应标题＆＃34; Access-Control-Allow-Origin＆＃34;，＆＃34; http://localhost:9000/＆＃34;或者使用标题来防止CORS错误并在响应中包含JSON数据？

非常感谢你的帮助！

Answer 1

在进一步研究之后，似乎有两种方法可以在从不允许跨源请求的API请求数据时克服CORS错误。

制作服务器端脚本，从API请求数据，然后将该数据提供给浏览器。
使用API代理服务，该服务使用不会触发CORS错误的相应标头进行响应。

Answer 2

使用fetch（）。它默认处理CORS并为我节省了很多麻烦。这是一个例子：

＆＃13;

fetch(url, {
    method: 'post',
    headers: {
      "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
    },
    body: JSON.stringify({foo:bar})
  })
  .then(function (resp){
    return resp.json()
  })
  .then(function (data) {
    console.log('Request succeeded with JSON response', data);
  })
  .catch(function (error) {
    console.log('Request failed', error);
  });

＆＃13;

使用香草JavaScript中没有JSONP的XMLHttpRequest克服CORS

2 个答案: