NestJS出现CORS错误：Axios配置withCredentials:true后接口调用失败

你遇到的CORS错误是浏览器同源策略的强制限制导致的：当请求配置withCredentials: true携带凭证时，后端CORS配置的origin不能使用通配符*，必须明确指定允许访问的前端源地址，同时credentials需要配置为true。 #

具体解决步骤 #

1. 调整NestJS的CORS配置，替换通配符origin为明确的白名单地址
   你可以直接写死单个前端地址，也可以配置白名单适配多环境，示例代码如下：

// main.ts
const allowedOrigins = [
  'http://localhost:3000', // 本地开发前端地址，按你实际运行端口修改
  'https://your-prod-domain.com' // 生产环境前端地址，按需添加
];

const options = {
  origin: (origin: string | undefined, callback: (err: Error | null, allow?: boolean) => void) => {
    // 允许无origin的请求（比如Postman测试）或者白名单内的请求
    if (!origin || allowedOrigins.includes(origin)) {
      callback(null, true);
    } else {
      callback(new Error('Not allowed by CORS'));
    }
  },
  methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
  preflightContinue: false,
  credentials: true, // 保持为true，允许请求携带凭证
};
app.enableCors(options);

2. 额外校验项

• 确认后端返回JWT的Set-Cookie响应头属性配置正确：本地开发使用http协议时，SameSite建议设置为Lax，不要设置Secure属性；生产环境使用https时如果需要跨站携带Cookie，需要设置SameSite: None同时开启Secure属性。
• 不要修改前端的withCredentials: true配置，保持该配置才能正常接收后端返回的Cookie存储JWT。

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