Angular对接NestJS Google OAuth2策略时遇CORS问题求助

你遇到的302状态码是Google OAuth授权流程的正常环节，但用Angular的AJAX请求（比如HttpClient）访问该接口是错误方式，核心原因：

• Google OAuth需要用户在浏览器中完成授权交互，AJAX是后台异步请求，无法触发浏览器的页面跳转和用户授权操作。
• 浏览器同源策略会拦截跨域的AJAX重定向（302跳转到Google授权页属于跨域），导致授权流程中断。

正确实现步骤 #

1. Angular端直接导航到授权URL #

不要用HttpClient发起请求，而是通过浏览器直接跳转至NestJS的Google授权接口。比如在登录按钮的点击事件中添加：

// Angular组件代码
onGoogleLogin(): void {
  window.location.href = 'http://localhost:4000/auth/google';
}

这样浏览器会直接跳转到Google授权页面，用户完成授权后，会自动跳转到你配置的redirect接口，最终跳转到前端的FE_REDIRECT_URL。

2. 前端处理授权回调 #

当NestJS重定向到FE_REDIRECT_URL并携带accessToken参数后，前端需要在目标页面解析参数并存储：

// 回调页面的组件代码
ngOnInit(): void {
  const accessToken = new URLSearchParams(window.location.search).get('accessToken');
  if (accessToken) {
    // 存储token，比如存入localStorage
    localStorage.setItem('authToken', accessToken);
    // 跳转到主页或其他授权页面
    this.router.navigate(['/home']);
  }
}

3. 验证NestJS的CORS配置 #

虽然核心问题是请求方式错误，但仍需确保CORS配置允许前端域名（比如http://localhost:4200），示例配置：

// main.ts
async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.enableCors({
    origin: 'http://localhost:4200', // 你的Angular前端域名
    credentials: true,
  });
  await app.listen(4000);
}
bootstrap();

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