No Access-Control-Allow-Origin error in Meteor app

Question

I added CORS extension to chrome. When called ajax from localhost I got response in the form of XML. If I disabled CORS extension I got the following error. I referred so many questions in this community. But I cant't resolve my problem. It may duplicate but I'm asking this question for help with hope.

XMLHttpRequest cannot load https://buzz.machaao.com/feed. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 401..

And my code is

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/zh-CN/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添加了标题的响应就是浏览器看到的内容，因此浏览器允许您的前端代码实际访问响应。