Vite.js+Passport.js应用POST请求返回200但凭证数据未接收问题

核心原因 #

Vite开发服务器的同源策略处理逻辑与Create React App不同，默认未配置代理时，跨域请求的凭证传递容易出现异常，即使后端CORS配置正确也可能失效。

解决方案 #

1. 配置Vite开发服务器代理 #

修改vite.config.js，添加代理转发规则，将前端请求转发到后端，模拟同源请求：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
  plugins: [react()],
  server: {
    port: 5173,
    proxy: {
      // 根据你的后端API前缀调整，比如所有/api开头的请求都转发
      '/api': {
        target: 'http://localhost:你的后端端口号', // 替换为实际后端地址
        changeOrigin: true,
        credentials: true // 确保携带凭证
      }
    }
  },
});

2. 调整axios请求地址 #

将axios的baseURL设置为代理前缀，而非直接使用后端地址：

import axios from 'axios'
axios.defaults.withCredentials = true;
axios.defaults.baseURL = '/api'; // 对应vite.config.js中的代理前缀

3. 检查后端Cookie配置 #

确保后端设置Cookie时配置了正确的SameSite属性，避免浏览器拦截：

// Express示例
res.cookie('auth_token', 你的凭证内容, {
  httpOnly: true,
  sameSite: process.env.NODE_ENV === 'production' ? 'none' : 'lax',
  secure: process.env.NODE_ENV === 'production', // 生产环境需HTTPS
  maxAge: 24 * 60 * 60 * 1000 // 根据需求设置有效期
});

4. 验证请求/响应头 #

在浏览器开发者工具的Network面板中：

• 查看登录请求的Request Headers是否包含Cookie字段
• 查看响应头是否包含Set-Cookie字段
• 确认Access-Control-Allow-Credentials为true

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