React+Axios JWT认证遭遇CORS跨域问题求助

核心原因 #

Postman不受浏览器CORS策略限制，但React运行在浏览器环境下，跨域请求必须遵循浏览器的CORS规则。你的问题根源是后端未返回Access-Control-Allow-Origin响应头，且预检OPTIONS请求未被正确处理。

解决方案 #

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

必须在后端服务中添加CORS相关响应头，处理跨域请求：

• 允许前端域名：设置Access-Control-Allow-Origin: http://localhost:3000（开发环境），生产环境替换为实际前端域名；若允许所有域名（不推荐生产）可设为*
• 处理预检请求：针对OPTIONS请求返回200状态，并添加Access-Control-Allow-Methods（允许的HTTP方法，如POST、GET）、Access-Control-Allow-Headers（允许的请求头，如Content-Type、Authorization）

以Node.js/Express为例，使用cors中间件快速配置：

const cors = require('cors');
const express = require('express');
const app = express();

// 开发环境配置
app.use(cors({
  origin: 'http://localhost:3000',
  allowedHeaders: ['Content-Type', 'Authorization'],
  methods: ['GET', 'POST', 'OPTIONS']
}));

2. 开发环境临时绕过CORS（仅测试用） #

如果后端暂时无法修改，可以用React内置代理：

• 在项目根目录的package.json中添加：

  "proxy": "https://api.<URL>.com"
  

• 修改Axios请求的URL，把https://api.<URL>.com/auth/token改为/auth/token，React会自动代理请求到后端，规避浏览器CORS检查

也可以使用浏览器CORS插件（如Allow CORS: Access-Control-Allow-Origin），但仅适合本地开发测试，不能用于生产环境。

3. 检查Axios请求配置 #

对比Postman的请求参数，确保React中的请求一致：

• 确认请求方法（POST）、Content-Type（如application/x-www-form-urlencoded或application/json）与Postman完全匹配
• 检查fetch_wrapper.js中的Axios实例是否添加了后端未允许的自定义请求头，这会触发预检失败
• 验证auth.slice.js中的请求参数格式（如表单数据或JSON）是否和Postman一致

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