React+Node.js环境下设置withCredentials为true时出现CORS错误的解决方法

我刚帮你排查了这个问题，核心原因出在你的服务端CORS配置上——当请求携带凭证（比如你这里的cookie）时，浏览器不允许服务端用通配符*作为允许的源（origin），这是同源策略的安全限制。

问题分析 #

你在客户端axios请求里设置了withCredentials: true，同时服务端CORS配置写了origin: '*'，这两个配置是冲突的：浏览器会认为用通配符允许所有源同时允许携带凭证是不安全的，所以会拦截服务端的响应，抛出CORS错误，哪怕服务端已经成功接收到cookie并返回了内容。

解决方案 #

修改服务端的CORS配置，把origin从*改成客户端实际运行的域名（比如本地开发常用的http://localhost:3000），具体步骤如下：

1. 更新服务端的corsOptions配置：

const corsOptions = {
  // 替换成你的客户端实际域名，比如localhost:3000
  origin: 'http://localhost:3000',
  credentials: true
}

如果需要支持多个客户端域名，可以用数组形式：

const corsOptions = {
  origin: ['http://localhost:3000', 'https://your-production-domain.com'],
  credentials: true
}

2. 重启你的Node.js服务端，让新配置生效。

修改后的完整服务端代码 #

import express from 'express';
import cors from 'cors';
import bodyParser from 'body-parser'
import cookieParser from 'cookie-parser'

const PORT = 4000;
const app = express();

const corsOptions = {
  // 替换为你的客户端实际地址
  origin: 'http://localhost:3000',
  credentials: true
}

// cors
app.use(cors(corsOptions));
app.use(bodyParser.urlencoded({extended: false}));
app.use(cookieParser())

app.get('/hello', (req, res) => {
  console.log(req.cookies);
  res.send('This is from server!')
})

app.listen(PORT, () => {
  console.log('listening on port', PORT);
});

为什么这样能解决问题 #

当请求携带凭证时，浏览器要求服务端必须明确指定允许的源（不能用通配符），同时响应头里必须包含Access-Control-Allow-Credentials: true（这个配置会由cors中间件自动添加，因为你设了credentials: true）。这样浏览器才会信任这个响应，允许客户端接收并处理返回的数据。

现在重新测试你的客户端请求，应该就能正常获取服务端返回的内容，同时服务端依然能打印出客户端发送的cookie了。

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