NestJS集成passport-google-oauth20实现Google OAuth2认证时遭遇CORS错误的技术求助

我之前踩过几乎一模一样的Google OAuth重定向+CORS坑，给你几个针对性的排查和解决方向：

核心问题：错误的OAuth触发方式 #

你现在用前端AJAX/fetch请求后端的loginGoogle接口，这是问题根源。Passport的Google OAuth守卫会直接返回302重定向到Google授权页，但浏览器会拦截AJAX跨域请求的重定向行为——OAuth流程本身是基于浏览器页面跳转设计的，不是AJAX请求。

快速修复：调整前端触发逻辑 #

把前端的点击事件改成直接跳转，不要用AJAX：

// 替换你的axios/fetch请求，改成页面跳转
document.querySelector('#google-login-btn').addEventListener('click', () => {
  window.location.href = 'http://localhost:5000/login-google'; // 后端的登录接口地址
});

这样浏览器会直接发起跳转，不会触发CORS预请求，也就不会出现405错误。

检查回调URL的完全一致性 #

Google OAuth对回调URL的匹配要求极其严格，必须保证三处完全一致：

• 代码中GoogleAuthGuard的callbackURL：http://localhost:5000/redirect
• Google开发者平台的授权重定向URI：在「API和服务」→「凭据」→「OAuth 2.0客户端ID」中添加完全相同的地址（包括http/https、端口、路径，不能有任何多余字符）
• 后端的/redirect路由：确保该路由存在并绑定了GoogleAuthGuard用于处理回调

确认NestJS CORS配置的正确应用 #

你的CORS配置看起来没问题，但要注意几个细节：

1. 配置必须在app.listen()之前调用，顺序错误会导致CORS不生效
2. 测试阶段可以暂时放宽origin，排除配置问题：

app.enableCors({
  origin: true, // 测试用，上线后改为具体域名列表
  credentials: true,
  methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
  optionsSuccessStatus: 204,
});

验证后端路由配置 #

确保你的AuthController路由结构正确，回调路由要单独处理：

@Controller()
export class AuthController {
  // 触发Google授权跳转的路由
  @Get('login-google')
  @UseGuards(GoogleAuthGuard)
  async loginGoogle() {
    // 这个方法不会被执行，因为守卫直接重定向
  }

  // 处理Google回调的路由
  @Get('redirect')
  @UseGuards(GoogleAuthGuard)
  async googleCallback(@Req() req) {
    // 在这里处理返回的用户信息，生成JWT或创建会话
    return { user: req.user, token: 'your-generated-jwt' };
  }
}

关于405错误的补充说明 #

你看到的OPTIONS 405是浏览器对AJAX跨域请求的预检查，因为你的前端用AJAX请求了后端接口，浏览器自动发送OPTIONS请求，但后端的login-google接口因为绑定了GoogleAuthGuard，可能没有处理OPTIONS方法。一旦改成页面跳转，这个预请求就会消失，405问题也会解决。

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