使用Axios请求URL为何触发CORS错误？

为什么直接浏览器能访问，Axios请求不行？ #

直接在浏览器地址栏打开URL属于简单的浏览器导航请求，不会触发跨域资源共享（CORS）的检查机制。但React通过Axios发起的是前端AJAX跨域请求，浏览器会强制验证目标服务器返回的响应头：必须包含Access-Control-Allow-Origin来允许你的前端域名访问，否则就会拦截请求并抛出CORS错误。

另外你代码里有个明显错误：Access-Control-Allow-Origin是服务器返回给浏览器的响应头，不是前端发起请求时需要携带的请求头，你在Axios的config里添加这个头完全没用，反而可能干扰请求，建议直接删掉。

代理配置是不是正确的解决方向？ #

是，代理是解决前端跨域CORS问题的常用方案，分两种场景处理：

开发环境（本地调试） #

可以用React官方支持的代理配置：

1. 简单代理：在项目根目录的package.json里添加一行：

   "proxy": "https://www.waze.com"
   

   然后修改你的请求URL为相对路径：

   const url = `/row-partnerhub-api/waze-map/streetsInfo?lat=${lat}&lon=${lon}&token=${process.env.REACT_APP_WAZE_GEOCODER}`;
   

   这样本地开发时，React的开发服务器会自动把请求转发到目标URL，浏览器会认为请求是同域的，不会触发CORS检查。

2. 复杂代理（如果需要匹配特定路径）：安装http-proxy-middleware，在src/setupProxy.js里配置：

   const { createProxyMiddleware } = require('http-proxy-middleware');
   
   module.exports = function(app) {
     app.use(
       '/row-partnerhub-api',
       createProxyMiddleware({
         target: 'https://www.waze.com',
         changeOrigin: true,
       })
     );
   };
   

   同样用相对路径发起请求即可。

生产环境 #

React的开发代理只适用于本地调试，生产环境需要：

• 如果你用Nginx部署前端，在Nginx配置里添加反向代理规则，把前端的API请求转发到Waze的服务器；
• 或者搭建一个自己的后端服务，由后端来请求Waze的API，前端再请求自己的后端接口，这样就不存在跨域问题。

额外注意点 #

有些第三方API本身就不允许前端直接调用（只开放给后端服务），即使配置代理也可能因为权限验证（比如token的使用限制）失败，这时候必须通过后端转发请求。

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