React中axios配置withCredentials携带Cookie的跨域问题如何解决？

你碰到的跨域报错是浏览器CORS规则的强制限制：当跨域请求需要携带凭据（Cookie、HTTP认证信息等，对应你设置withCredentials = true的场景）时，必须满足两个前提：

• 服务端不能返回Access-Control-Allow-Origin: *，必须返回和请求方Origin完全匹配的域名/IP
• 服务端必须返回Access-Control-Allow-Credentials: true响应头

你之前配置的origin: '*'只能适配不带凭据的跨域请求，开启withCredentials后就会被浏览器拦截。

需要同时调整服务端CORS规则和前端axios配置，两者缺一不可：

1. Express服务端CORS配置 #

如果使用官方cors中间件，按以下规则配置：

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

app.use(cors({
  // 动态设置允许的来源为请求方的Origin，适配所有公网客户端访问
  origin: (origin, callback) => {
    // 有安全要求的场景可以在这里加白名单校验，仅允许白名单内的来源访问
    callback(null, true);
  },
  // 必须开启，允许跨域请求携带凭据
  credentials: true
}));

// 后续接口逻辑
app.listen(5002, () => console.log('服务启动'));

如果没有使用cors中间件，手动写全局响应头配置：

app.use((req, res, next) => {
  const requestOrigin = req.headers.origin;
  if (requestOrigin) {
    res.setHeader('Access-Control-Allow-Origin', requestOrigin);
  }
  res.setHeader('Access-Control-Allow-Credentials', 'true');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  // 直接处理OPTIONS预检请求
  if (req.method === 'OPTIONS') {
    return res.sendStatus(200);
  }
  next();
});

提示：如果有安全合规要求，不要直接允许所有Origin，可以在origin判断逻辑中加入域名/IP白名单校验，降低CSRF攻击风险。

2. React端axios配置 #

只需要全局开启withCredentials即可，无需其他额外配置：

import axios from 'axios';

// 全局配置所有axios请求自动跨域携带Cookie
axios.defaults.withCredentials = true;

// 注意：请求地址必须填服务端实际的公网IP/域名，不要写localhost
axios.post('http://192.168.0.1:5002/api/login', {
  username: '你的账号',
  password: '你的密码'
}).then(res => {
  // 处理登录逻辑
});

• 前端请求的服务端地址不要写localhost，否则客户端在非服务端本机访问时，会请求到客户端本地的端口，导致通信失败
• 生产环境如果使用HTTPS协议，需要将Cookie的SameSite属性设置为None; Secure，否则跨站场景下Cookie会被浏览器拦截
• 本地开发阶段可以用CRA的代理功能转发请求，绕过跨域限制，生产环境再按上述规则配置即可

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