React中Axios GET请求遭遇CORS问题求助

你遇到的CORS错误信息如下：

Access to XMLHttpRequest at 'http://localhost:8080/api/v1/company/getmycompany?uid=1' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

你的Axios请求代码：

const res = await axios.get('http://localhost:8080/api/v1/company/getmycompany?uid=1', {
        headers: {
            'Authorization': 'Bearer  '+ JWTToken
        }
    });

问题原因 #

Postman能正常请求是因为它不受浏览器同源策略限制，而你的前端请求因为携带了Authorization自定义请求头，浏览器会自动发送一个OPTIONS预请求到后端，验证是否允许跨域。但后端没有正确处理这个预请求，也没有返回Access-Control-Allow-Origin等必需的CORS响应头，导致浏览器拦截了响应。

解决方案 #

1. 后端配置CORS（根本解决方式）

• 必须在后端服务的响应中添加Access-Control-Allow-Origin头，值设为http://localhost:3000（生产环境建议指定具体域名，不要用*，因为当请求带Authorization等凭证时，*不生效）
• 添加Access-Control-Allow-Headers头，值包含Authorization，明确允许这个自定义请求头
• 确保后端能正确响应OPTIONS方法的预请求，返回200状态码及上述CORS头

2. 开发环境临时代理方案

在React项目的package.json中添加代理配置：

"proxy": "http://localhost:8080"

然后修改Axios请求地址，去掉域名部分：

const res = await axios.get('/api/v1/company/getmycompany?uid=1', {
        headers: {
            'Authorization': 'Bearer  '+ JWTToken
        }
    });

这样开发时React会自动将请求代理到后端，绕过浏览器的CORS检查。

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