FastAPI认证接口返回重定向但页面未跳转问题求助

核心问题排查 #

1. 后端response_model冲突
   你给/token接口设置了response_model=Token，但实际返回的是RedirectResponse而非Token模型的JSON数据。FastAPI会尝试将RedirectResponse序列化为Token模型，这会导致响应处理异常——虽然日志显示302状态码，但实际返回的响应可能不符合浏览器的重定向预期。

2. 前端提交方式导致重定向未生效

   • 如果是异步JS提交（如Fetch/Axios），浏览器不会自动处理重定向响应，需要手动触发页面跳转。
   • 如果是普通HTML表单，可能存在JS阻止默认提交行为的代码，导致浏览器无法执行重定向。

修复步骤 #

步骤1：修正后端接口代码 #

移除response_model=Token，确保返回的RedirectResponse能被正确处理：

from fastapi import FastAPI, Request, Depends, HTTPException, status
from fastapi.security import OAuth2PasswordRequestForm
from fastapi.responses import RedirectResponse
from datetime import timedelta
from typing import Annotated

# 假设你的其他依赖（authenticate_user、create_access_token等）已定义
USERS = {}  # 示例用户存储
ACCESS_TOKEN_EXPIRE_MINUTES = 30

@app.post("/token")  # 移除response_model=Token
async def login_for_access_token(
    request: Request,
    form_data: Annotated[OAuth2PasswordRequestForm, Depends()]
):
    user = authenticate_user(USERS, form_data.username, form_data.password)
    if not user:
        raise HTTPException(
            status_code=status.HTTP_401_UNAUTHORIZED,
            detail="Incorrect username or password",
            headers={"WWW-Authenticate": "Bearer"},
        )
    access_token_expires = timedelta(minutes=ACCESS_TOKEN_EXPIRE_MINUTES)
    access_token = create_access_token(
        data={"sub": user.username}, expires_delta=access_token_expires
    )

    rr = RedirectResponse('/home', status_code=303)
    rr.set_cookie(key="session_token", value=access_token)
    return rr

步骤2：针对前端场景修复 #

场景A：普通HTML表单提交

确保表单没有被JS阻止默认提交行为，示例表单代码：

<form action="/token" method="post">
    <div>
        <label>用户名：</label>
        <input type="text" name="username" required>
    </div>
    <div>
        <label>密码：</label>
        <input type="password" name="password" required>
    </div>
    <button type="submit">登录</button>
</form>

检查页面中是否存在类似event.preventDefault()的代码，若有则移除，让浏览器自动处理表单提交后的重定向。

场景B：异步JS提交（如Fetch）

在响应处理中手动触发页面跳转：

document.getElementById("login-form").addEventListener("submit", async (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    
    const response = await fetch("/token", {
        method: "POST",
        body: formData
    });

    // 处理重定向响应
    if (response.redirected) {
        window.location.href = response.url;
    } else {
        // 处理认证失败的情况
        const errorData = await response.json();
        alert(errorData.detail);
    }
});

额外验证点 #

• 检查Cookie的设置参数：如果需要后续接口验证Cookie，确保set_cookie的path参数正确（默认是/，覆盖所有路由），若不需要前端读取Cookie，可添加httponly=True提升安全性。
• 确认/home路由的权限验证逻辑正确，确保携带Cookie的请求能正常访问该页面。

内容的提问来源于stack exchange，提问作者Luis Filipe Araujo