FastAPI-Users集成Google OAuth流程及CORS问题咨询

一、正确调用流程 #

别用AJAX/fetch请求/auth/google/authorize，OAuth2授权码流程是浏览器跳转逻辑，正确步骤：

• 前端拿到后端返回的/auth/google/authorize链接后，直接通过window.location.href跳转到该地址（或前端直接构造跳转链接，参数由fastapi-users自动处理）
• 用户在Google授权页完成登录授权后，Google会自动重定向到后端的/auth/google/callback端点，同时携带授权所需参数
• 后端的callback端点会自动和Google验证授权信息，完成后可以返回JWT Token，或者重定向到前端页面并携带Token

二、CORS错误解决 #

你遇到的CORS问题，本质是用AJAX请求了需要重定向的OAuth授权端点，跨域AJAX的重定向会触发浏览器的CORS限制。解决方式：

1. 放弃AJAX调用，改用浏览器页面跳转访问/auth/google/authorize
2. 确保后端CORSMiddleware配置正确，允许前端域名及凭证：

from fastapi.middleware.cors import CORSMiddleware

app.add_middleware(
    CORSMiddleware,
    allow_origins=["http://localhost:4200"],  # 替换成你的Angular前端域名
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

三、callback字段来源说明 #

/auth/google/callback所需的参数都是流程自动生成的，不需要前端手动构造：

• code：Google在用户授权成功后，作为URL参数自动传递给callback的授权码
• state：后端/auth/google/authorize端点生成的随机串，用于防范CSRF攻击，后端会自动验证该值的有效性
• code_verifier：PKCE流程（fastapi-users默认启用）中，后端在authorize阶段生成的随机串，对应的code_challenge会发送给Google，callback时后端自动用保存的verifier完成验证，前端无需干预

内容的提问来源于stack exchange，提问作者Matej Senožetnik