React+Express全栈应用中Axios开启withCredentials后的CORS问题

1. 修复Express后端的CORS配置 #

核心问题是你的后端CORS中间件未开启credentials: true，这是前端携带凭证（Cookie）时的强制要求。修改后的后端代码如下：

const app = express();

//middleware
app.use(cors({
  origin: "http://localhost:3000", // 必须指定具体前端域名，不能用通配符*
  credentials: true // 开启允许携带凭证
}));
app.use(express.json());
app.use(cookieParser());
dotenv.config();
app.use("/auth", authRoutes);

2. 清理前端Axios请求中的无效头 #

前端请求里的Access-Control-Allow-Origin和Access-Control-Allow-Credentials是服务器响应头，不需要在前端请求中设置，完全属于无效配置，直接删除即可：

class UserService{
    static async getAll(){
        const accessToken = localStorage.getItem("accessToken")
        return await axios.get<{data: UsersListData, msg: string}>("/auth/getUsers", { 
            withCredentials: true, 
            headers: { Authorization: `Bearer ${accessToken}` }
        });
    }
}

关键原理说明 #

当前端通过withCredentials: true携带Cookie时，浏览器会强制要求后端满足两个条件：

• 响应头必须包含Access-Control-Allow-Credentials: true
• Access-Control-Allow-Origin必须是具体域名（不能用通配符*），否则浏览器会直接拒绝接收响应

额外注意事项 #

如果后端通过res.cookie()设置refresh token，需要确保：

• SameSite属性设置为Lax（本地开发场景足够）或None（跨域部署时需配合Secure: true，即仅通过HTTPS传输）
• 本地localhost环境下不要随意设置domain属性，留空即可避免Cookie无法正确携带

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