Node Express与React Axios中CORS阻止XMLHttpRequest访问问题

你的问题核心是开启withCredentials后，后端CORS配置未正确允许凭证传递，导致浏览器拦截请求。报错信息明确指出：当请求的凭证模式为include时，响应的Access-Control-Allow-Credentials头必须设为true，而你当前的CORS配置缺少这个关键项。

修复步骤： #

1. 修改CORS中间件配置，添加credentials: true
   把现有CORS配置更新为：

   app.use(cors({
     origin: 'http://localhost:3000',
     credentials: true // 允许跨域请求携带凭证（Cookie、HTTP认证等）
   }));
   

   这个配置会让后端在响应中自动添加Access-Control-Allow-Credentials: true头，满足浏览器的预检要求。

2. 确认中间件顺序
   你当前的中间件顺序是正确的：CORS中间件必须放在所有路由、express.json、cookieParser等处理中间件之前，确保CORS头在所有响应中都能被正确设置。

3. 后端Cookie设置补充（若需在前端设置Cookie）
   如果是后端向前端设置Cookie，需要额外配置Cookie的属性：

   res.cookie('yourCookieName', 'value', {
     httpOnly: true,
     sameSite: 'None', // 跨域场景必须设为None
     secure: process.env.NODE_ENV === 'production' // 生产环境需开启HTTPS并设为true
   });
   

为什么之前的配置无效？ #

仅指定origin的CORS配置不会自动开启凭证允许，浏览器在预检OPTIONS请求时，检测到响应没有Access-Control-Allow-Credentials: true，就会拦截后续的实际请求，这就是你开启withCredentials=true时报错的原因。

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