Angular+Spring Boot集成Google OAuth2遇CORS错误求助

你遇到的CORS错误核心原因是OAuth2授权码流程的使用方式错误——你用Angular的HttpClient.get()发起AJAX请求去访问授权端点，但这个端点的设计是要触发浏览器跳转，而不是返回JSON数据给AJAX。

具体来说：

• 当你调用/oauth2/authorization/google时，后端会立即重定向到Google的登录页面（https://accounts.google.com/o/oauth2/v2/auth）
• 因为你是用AJAX发起请求，浏览器会把这个重定向的响应当成跨域AJAX响应来处理，但Google的登录页面不会返回Access-Control-Allow-Origin头，所以直接触发了CORS拦截
• 你的后端CORS配置完全没问题，但它只能控制后端自己的接口，管不到Google的服务器，所以配置无效

你需要修改前端的登录触发逻辑，不要用AJAX请求，而是让浏览器直接导航到授权端点，这样就不会触发CORS限制（CORS只针对AJAX/fetch请求，不限制浏览器的页面跳转行为）。

修改你的Angular代码：

// 替换原来的googleLogin方法，不需要再返回Observable
public onGoogleLogin(): void {
  // 直接让浏览器跳转到后端的授权端点
  window.location.href = environment.baseUrl + '/oauth2/authorization/google';
}

当用户在Google完成登录后，后端的successHandler会把用户重定向到/api/v1/oauth2/authenticate?token=xxx，这时候你可以：

1. 在Angular中配置一个路由（比如/oauth2/callback）来接收这个跳转
2. 在该路由对应的组件中，从URL参数里提取token，然后存入localStorage并处理登录后的逻辑
   示例组件代码：

   import { ActivatedRoute } from '@angular/router';
   
   constructor(private route: ActivatedRoute) {}
   
   ngOnInit(): void {
     this.route.queryParamMap.subscribe(params => {
       const token = params.get('token');
       if (token) {
         localStorage.setItem('access_token', token);
         // 跳转到首页或其他需要登录的页面
         window.location.href = '/';
       }
     });
   }
   

OAuth2授权码流程的第一步（获取授权码）必须通过浏览器跳转完成，因为这涉及到用户在第三方（Google）的登录交互，而AJAX请求无法处理这种跨域的页面跳转和用户交互——浏览器会出于安全原因拦截这类操作。

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