Vue+Axios向第三方站点发起GET请求出现CORS错误如何解决？

CORS（跨源资源共享）是浏览器独有的安全策略，目的是避免恶意站点未经授权窃取用户的敏感数据，该限制仅作用于浏览器端发起的XMLHttpRequest、fetch等前端请求。服务端发起HTTP请求时没有这套校验规则，所以你用Express发起相同请求可以正常拿到响应。
不管你是本地开发还是把Vue项目部署到线上服务器，只要你前端直接请求的第三方站点没有在响应头里配置Access-Control-Allow-Origin允许你的域名访问，就会触发这个报错，你作为调用方没有权限修改第三方站点的服务配置，所以需要通过其他方案绕开浏览器的CORS限制。

• 后端代理转发（最推荐，可用于线上生产环境）
  前端所有跨域请求都先发给和你Vue站点同域的后端服务，由后端服务转发请求到第三方站点，拿到响应后再返回给前端。
  开发环境下你可以直接配置Vue的devServer代理快速解决问题，配置示例如下：

  // vue.config.js
  module.exports = {
    devServer: {
      proxy: {
        '/stack-api': {
          target: 'https://stackoverflow.com',
          changeOrigin: true, // 更改请求源为目标站点域名
          pathRewrite: { '^/stack-api': '' }
        }
      }
    }
  }
  

  配置后前端请求改为axios.get('/stack-api')即可，本地开发不会再触发跨域报错。线上环境可以用你自己的Express服务做转发，或者配置Nginx反向代理规则，逻辑和开发环境代理一致。
• JSONP请求
  如果第三方站点提供了支持JSONP的接口，可以改用JSONP方式发起请求，缺点是仅支持GET请求，且必须第三方接口适配。
• 本地调试临时方案
  如果仅用于本地测试，可以给浏览器安装禁用CORS限制的插件，或者启动浏览器时添加禁用安全策略的启动参数，该方案仅能本地用，无法解决线上用户的访问问题。

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