FastAPI+JWTDown页面刷新时出现405 Method Not Allowed问题求助

使用FastAPI做后端、Vite+React做前端，通过Galvanize的JWTDown实现认证功能。前端已配置受保护路由，仅登录用户可访问网站完整内容，登录后能成功获取token并正常浏览，但刷新页面时，即便仍持有token，保护逻辑失效，返回405 Method Not Allowed。已尝试相关方案但无效。

前端获取token代码 #

try {
  const loginUrl = `${viteUrl}/token/`;
  const fetchConfig = {
    method: "GET",
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
    },
    credentials: "include",
  };

  const response = await fetch(loginUrl, fetchConfig);
  const data = await response.json();
  setUserid(data.user.userid);
} catch (error) {
  console.error(error);
  return null;
};

FastAPI后端路由代码 #

@router.get("/token/", response_model=UserToken | None)
async def get_token(
    request: Request,
    user: dict = Depends(authenticator.try_get_current_account_data),
) -> UserToken | None:
    if not user or authenticator.cookie_name not in request.cookies:
        return None  # User not authenticated or cookie not found
    return {
        "access_token": request.cookies[authenticator.cookie_name],
        "type": "Bearer",
        "user": user,
    }

可能原因与解决方案 #

1. 前端路由与后端路由冲突 #

React单页应用刷新时，浏览器会直接向服务器发起对应路径的GET请求。如果前端受保护路由（如/dashboard）与后端路由路径冲突，或后端未配置静态文件 fallback，服务器会尝试匹配后端路由，找不到对应GET方法的路由就返回405。

• 解决：在FastAPI中配置静态文件服务，并添加catch-all路由，将未匹配的请求转发到React入口文件：

from fastapi.staticfiles import StaticFiles

# 假设React构建产物存放在dist目录
app.mount("/", StaticFiles(directory="dist", html=True), name="static")

2. Cookie属性配置问题 #

刷新页面时，浏览器可能未正确携带认证Cookie，导致后端无法获取用户信息，进而触发异常路由逻辑返回405。

• 解决：检查JWTDown设置Cookie时的SameSite和secure属性：

authenticator = Authenticator(
    # 其他配置项...
    cookie_secure=False,  # 开发环境设为False，生产HTTPS环境设为True
    cookie_samesite="Lax",
)

3. 前端路由守卫逻辑时序问题 #

刷新页面时，前端可能在token获取完成前就执行路由校验，错误判断用户未认证，触发错误跳转或请求。

• 解决：修改路由守卫逻辑，确保异步获取token完成后再判断认证状态：

useEffect(() => {
  const fetchTokenAndCheckAuth = async () => {
    try {
      const response = await fetch(`${viteUrl}/token/`, {
        method: "GET",
        credentials: "include",
      });
      const data = await response.json();
      if (data) {
        setUserid(data.user.userid);
        setIsAuthenticated(true);
      } else {
        setIsAuthenticated(false);
        navigate("/login");
      }
    } catch (err) {
      console.error(err);
      setIsAuthenticated(false);
      navigate("/login");
    }
  };
  fetchTokenAndCheckAuth();
}, [navigate]);

4. 后端中间件方法拦截 #

检查是否存在中间件对GET请求做了限制，导致刷新时的请求被拦截返回405。

• 解决：确保/token/的GET路由未被其他中间件拦截，检查全局中间件的方法过滤规则。

内容的提问来源于stack exchange，提问作者b.veits