JavaScript中HTTP GET请求失效，求助解决跨域访问错误

嗨，我来帮你搞定这个问题！

你看到的这个No 'Access-Control-Allow-Origin' header is present错误，是浏览器的同源安全策略在起作用：

• 当你直接双击打开本地的index.html文件时，页面的源（Origin）是null（因为不是通过HTTP服务器加载的）
• https://www.google.ca/的服务器没有在响应头里添加Access-Control-Allow-Origin字段来允许来自null的跨域请求，所以浏览器直接拦截了这次请求，避免潜在的安全风险。

1. 先通过本地HTTP服务器加载你的页面 #

直接打开本地HTML文件会触发null Origin的特殊情况，你可以用简单的本地服务器来运行你的代码：

• 如果你装了Python，打开终端运行：

  # 适用于Python 3
  python -m http.server 8000
  # 适用于Python 2
  python -m SimpleHTTPServer 8000
  

  然后在浏览器里访问http://localhost:8000/index.html，此时页面的Origin变成了http://localhost:8000。不过要注意：就算这样，Google的服务器依然不会允许这个跨域请求——因为像Google这类公共网站，默认不会开放CORS给任意外部域名。

2. 用代理服务器转发请求（测试场景推荐） #

既然目标服务器不允许跨域，我们可以用一个代理服务器来“中转”请求：浏览器和同源的代理服务器通信，代理服务器再去请求Google的服务器，这样就绕开了CORS限制。

比如用Node.js写个简单的代理：

// 新建proxy.js文件
const http = require('http');
const https = require('https');

http.createServer((req, res) => {
  // 配置要转发的目标服务器信息
  const proxyOptions = {
    hostname: 'www.google.ca',
    path: req.url,
    method: 'GET'
  };

  // 发起对Google服务器的请求
  const proxyRequest = https.request(proxyOptions, (proxyResponse) => {
    // 将代理收到的响应转发给前端
    res.writeHead(proxyResponse.statusCode, proxyResponse.headers);
    proxyResponse.pipe(res, { end: true });
  });

  // 将前端的请求转发给代理
  req.pipe(proxyRequest, { end: true });
}).listen(3000);

运行这个代理：

node proxy.js

然后修改你代码里的请求地址为代理地址：

httpGetAsync("http://localhost:3000/", call);

最后再通过刚才的本地HTTP服务器访问你的index.html，就能正常获取响应啦。

3. 生产环境的正确做法 #

如果你的实际需求是获取这类公共网站的内容，不要在前端直接发起跨域请求，正确的方式是在你自己的后端服务器上发起请求，然后把结果返回给前端。这样前端和后端是同源的，完全不会有CORS问题，同时也能避免前端暴露敏感请求信息。

内容的提问来源于stack exchange，提问作者Mathew