Question

我在chrome中添加了CORS扩展。当从localhost调用ajax时，我得到了XML形式的响应。如果我禁用CORS扩展，我收到以下错误。我在这个社区提到了很多问题。但我无法解决我的问题。它可能会重复，但我正在向这个问题寻求帮助。

XMLHttpRequest无法加载https://buzz.machaao.com/feed。对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许原点“http://localhost:3000”访问。响应的HTTP状态代码为401 ..

我的代码是

HTTP.get('https://buzz.machaao.com/feed',{
   headers: {
      "Access-Control-Allow-Origin" : "*"
      }
        }, (err, res) => {
      if(err) {
            console.log(err);
      }
      else {
            console.log(res);
      }
    });

Answer 1

https://buzz.machaao.com/feed网站不会发送Access-Control-Allow-Origin响应标头，因此您需要通过代理发出请求，而不是这样：

var proxyUrl = 'https://cors-anywhere.herokuapp.com/',
    targetUrl = 'http://catfacts-api.appspot.com/api/facts?number=99'

HTTP.get(proxyUrl + targetUrl,
  (err, res) => {
    if(err) {
      console.log(err);
    }
    else {
      console.log(res);
    }
});

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS解释了为什么浏览器不允许您从Web应用中运行的前端JavaScript代码访问响应跨源，除非响应包含Access-Control-Allow-Origin响应标头。

https://buzz.machaao.com/feed没有Access-Control-Allow-Origin响应标头，因此您的前端代码无法访问跨源响应。

您的浏览器可以很好地获得响应，您甚至可以在浏览器devtools中看到它 - 但是除非它有Access-Control-Allow-Origin响应标头，否则您的浏览器不会将其暴露给您的代码。因此，您必须使用代理来获取它。

代理向该站点发出请求，获取响应，添加Access-Control-Allow-Origin响应头和所需的任何其他CORS头，然后将其传递回您的请求代码。并且添加了Access-Control-Allow-Origin标头的响应是浏览器看到的，因此浏览器允许您的前端代码实际访问响应。

Meteor app

1 个答案: