Axios请求本地接口CORS跨域报错、代理配置无效问题咨询

• 对CORS机制理解错误：Access-Control-Allow-Origin 是服务端返回的响应头，前端在请求头中添加该字段毫无作用，反而会触发浏览器OPTIONS预检请求，直接导致跨域校验失败。
• 代理配置完全未生效：一方面代理配置本身存在语法、属性名错误，另一方面前端请求直接写死了8080端口的绝对地址，根本没有匹配到代理规则。

你不需要在前端请求里加任何CORS相关字段，优先修正本地开发代理配置即可，步骤如下：

1. 修正代理配置文件 #

首先确认代理配置文件路径为src/setupProxy.js（create-react-app 会自动加载该路径下的代理规则，放其他位置不会生效），修正原有配置的三个错误：

• 移除createProxyMiddleware多余的第一个路径参数（路径匹配已经在app.use中定义）
• 修正属性名大小写错误：ChangeOrigin 改为 changeOrigin（JS大小写敏感，原属性不会被识别）
• 添加路径重写规则，避免代理前缀被带到目标服务

修正后的完整代理代码：

const { createProxyMiddleware } = require("http-proxy-middleware")

module.exports = app =>  {
    app.use(
        '/api',
        createProxyMiddleware({
            target: "http://localhost:8080",
            changeOrigin: true,
            pathRewrite: {
                '^/api': '' // 转发时去掉请求路径里的/api前缀
            }
        })
    )
}

该配置的作用是：所有发往/api/**的前端请求，都会被本地开发服务器（localhost:8081）转发到http://localhost:8080/**，由于请求是服务端发出的，不存在浏览器同源限制，自然不会触发CORS拦截。

2. 修正前端请求代码 #

做两个改动即可：

• 删除请求头中错误添加的Access-Control-Allow-Origin字段
• 将请求的绝对路径改为代理路径，不要直接写8080服务的完整地址，否则不会走代理

修正后的组件代码：

function Champions() {
    const token = "...."

    useEffect(() => {
      const headers = {
        Authorization: `Bearer ${token}`
      };
      // 走本地代理路径
      axios
        .get("/api/champions", { headers })
        .then((response) => console.log(response));
    }, []);

    return (
        <div>
          <h1>Coucou</h1>
        </div>
    )
  }

export default Champions;

• 修改完setupProxy.js后必须重启前端开发服务，新的代理规则才会生效。
• 如果不想用本地代理、要直接跨域请求接口，必须在8080端口的后端服务中配置CORS规则：需要在响应头中返回Access-Control-Allow-Origin: http://localhost:8081，同时由于你携带了Authorization自定义请求头，还需要返回Access-Control-Allow-Headers: Authorization，允许预检请求通过。前端加任何CORS相关头都无法解决服务端未配置CORS的问题。

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