Node.js与Express配置cors后仍出现跨域报错该如何处理？

错误原因 #

你当前使用cors()中间件的默认配置，会返回Access-Control-Allow-Origin: *的响应头，而你的前端请求开启了credentials: include模式（需要携带cookie等身份凭证），浏览器的CORS策略禁止这种场景下使用通配符*作为允许的源地址。

修复步骤 #

• 替换默认的cors中间件配置，明确指定允许的前端源地址，同时开启凭证支持
  将你代码里的app.use(cors());替换为如下内容：

app.use(cors({
  // 明确指定你的前端地址，也就是报错里的源地址
  origin: 'http://localhost:3000',
  // 允许请求携带身份凭证（cookie、HTTP认证信息等）
  credentials: true
}))

• 如果你需要允许多个源地址访问，可以使用动态判断逻辑：

// 所有允许访问的源地址列表
const allowList = ['http://localhost:3000', 'http://其他允许的源地址:端口'];
app.use(cors({
  origin: (origin, callback) => {
    // 这里加||!origin是允许postman等不带origin头的工具请求，不需要可删除
    if(allowList.includes(origin) || !origin) {
      callback(null, true);
    } else {
      callback(new Error('该源地址不允许跨域访问'));
    }
  },
  credentials: true
}))

• 检查配套配置
  • 前端请求配置要和后端对应：fetch请求需设置credentials: 'include'，axios请求需设置withCredentials: true
  • 确认没有其他中间件、反向代理（如Nginx）重复设置Access-Control-Allow-Origin头，重复设置会导致配置冲突
• （可选）Socket服务单独配置CORS
  你代码中引入了socket相关逻辑，socket.io服务需要单独配置CORS，示例如下：

const io = require('socket.io')(server, {
  cors: {
    origin: 'http://localhost:3000',
    credentials: true
  }
})

修改完所有配置后重启Node服务即可生效。

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