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

在提供的代码中，JavaScript fetch() 方法用于使用从 Google 获得的令牌向后端端点发送 POST 请求。后端验证 token 后，会返回一个 RedirectResponse，状态码为 303。但是，浏览器中不会发生重定向。

选项 1：返回 RedirectResponse

默认情况下，fetch() 函数遵循重定向响应。因此，您可以在 fetch() 响应中使用 Response.redirected 和 Response.url 属性来手动重定向用户。

工作示例：

fetch('http://localhost:8000/login', {
  method: 'POST',
  headers: { ... },
  body: { ... },
  redirect: 'follow'
})
.then(res => {
  if (res.redirected) {
    window.location.href = res.url;
  } else {
    // Handle non-redirect responses
  }
})

选项 2：返回带有重定向 URL 的 JSON 响应

或者，后端可以返回包含重定向 URL 的 JSON 响应。在前端，您可以检查响应中的“url”键并相应地重定向用户。

工作示例：

fetch('http://localhost:8000/login', {
  method: 'POST',
  headers: { ... },
  body: { ... },
})
.then(res => res.json())
.then(data => {
  if (data.url) {
    window.location.href = data.url;
  } else {
    // Handle non-redirect responses
  }
})

选项 3：使用 HTML

如果不需要使用 fetch()，您可以使用带有提交按钮的传统 HTML 表单。提交表单时，如果服务器返回 RedirectResponse，浏览器将自动处理重定向。