如何使用 JavaScript Fetch API 登陆后将用户重定向到另一个页面？

在 JavaScript 代码中，使用 fetch() 方法向 FastAPI 后端发出 POST 请求以登录用户。后端检查令牌是否有效，如果是，则返回重定向（即 RedirectResponse）到另一个网页。但问题是：浏览器中的重定向不起作用，前一页仍然存在。

选项 1 - 返回 RedirectResponse

默认情况下，使用 fetch() 发出 HTTP 请求时，若服务器以 RedirectResponse 响应，则会在クライアント側自动跟踪重定向（如这里所述），因为 fetch() 函数中已将重定向模式默认设置为 follow。这意味着用户不会被重定向到新 URL，而是 fetch() 会在后台跟踪该重定向并返回重定向 URL 的响应。你可以预期将重定向设置为 manual 让你可以获取重定向 URL（包含在 Location 响应头中）并手动导航到新页面，但事实并非如此，如这里所述。

不过，你仍然可以在 fetch() 请求中使用默认的重定向模式 follow（不需要手动指定，因为默认已设置好——在下面的示例中，仅出于清晰度目的而手动定义它），然后使用 Response.redirected 检查响应是否是你发起的请求被重定向的结果。如果是，则可以使用 Response.url，它将返回“任何重定向之后获得的最终 URL”，并且使用 JavaScript 的 window.location.href，你可以将用户重定向到目标 URL（即重定向页面）。

除了 window.location.href，还可以使用 window.location.replace()。与设置 href 属性值不同，使用 location.replace() 方法后，导航到给定 URL 后，当前页面不会保存在会话历史记录中——这意味着用户将无法使用后退按钮导航到它。

app.py

from fastapi import FastAPI, Request, status, Depends
from fastapi.templating import Jinja2Templates
from fastapi.responses import RedirectResponse
from fastapi.security import OAuth2PasswordRequestForm

app = FastAPI()
templates = Jinja2Templates(directory='templates')


@app.get('/')
async def index(request: Request):
    return templates.TemplateResponse('index.html', {'request': request})

    
@app.post('/login')
async def login(data: OAuth2PasswordRequestForm = Depends()):
    # 执行一些验证，使用 data.username 和 data.password
    credentials_valid = True
    
    if credentials_valid:
        return RedirectResponse(url='/welcome',status_code=status.HTTP_302_FOUND)
    else:
        return 'Validation failed'
 

@app.get('/welcome')
async def welcome():
    return 'You have been successfully redirected'

templates/index.html

   
      
         Username:

Password:



      

   

选项 2 - 返回包含重定向 URL 的 JSON 响应

除了从服务器返回 RedirectResponse 之外，还可以让服务器返回包含在 JSON 对象中的、带有 URL 的普通 JSON 响应。在クライアント側，你可以检查服务器返回的（fetch() 请求的结果）JSON 对象是否包含 url 键，如果是，则检索其值并使用 JavaScript 的 window.location.href 或 window.location.replace() 将用户重定向到目标 URL。

或者，人们可以在服务器端将重定向 URL 添加到自定义响应头（请参见这里和这里的示例，了解如何在 FastAPI 中设置响应头），并在使用 fetch() 发布请求后在クライアント側访问它，如这里所示（请注意，如果你正在进行跨域请求，则必须在服务器端设置 Access-Control-Expose-Headers 响应头（请参见这里和这里的示例，以及 FastAPI 的 CORSMiddleware 文档，了解如何使用 expose_headers 参数），指定你的自定义响应头（包括重定向 URL）应可用于在浏览器中运行的 JS 脚本，因为默认情况下仅公开 CORS 安全列表响应头）。

app.py

from fastapi import FastAPI, Request, status, Depends
from fastapi.templating import Jinja2Templates
from fastapi.security import OAuth2PasswordRequestForm

app = FastAPI()
templates = Jinja2Templates(directory='templates')


@app.get('/')
async def index(request: Request):
    return templates.TemplateResponse('index.html', {'request': request})

    
@app.post('/login')
async def login(data: OAuth2PasswordRequestForm = Depends()):
    # 执行一些验证，使用 data.username 和 data.password
    credentials_valid = True
    
    if credentials_valid:
        return {'url': '/welcome'}
    else:
        return 'Validation failed'
 

@app.get('/welcome')
async def welcome():
    return 'You have been successfully redirected'

templates/index.html

   
      

         Username:

Password:



      

   

选项 3 - 在前端使用 HTML