javascript - Meteor 应用程序中没有访问控制允许来源错误

Question

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

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..

我的代码是

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 响应 header ，因此您需要通过代理发出请求，如下所示:

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 响应 header 。

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

您的浏览器可以很好地获得响应，您甚至可以在浏览器开发工具中看到它——但是您的浏览器不会将它暴露给您的代码，除非它有一个 Access-Control-Allow-Origin 响应 header 。因此，您必须改为使用代理来获取它。

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