Fetch API调用后端302接口后如何触发浏览器页面导航？

首先明确：仅靠配置响应头或初始Fetch请求参数，没办法让浏览器自动触发页面导航。因为Fetch API本身就是为异步数据请求设计的，默认会静默跟随重定向，不会触发页面跳转。

下面是几个可行的替代方案：

• 手动处理重定向逻辑：在Fetch的响应回调里，检查状态码是否为3xx（比如302），拿到Location头的地址后，用window.location.href或window.location.replace()手动触发页面导航。
  示例代码：

  fetch('/your-api-path')
    .then(res => {
      // 通过res.redirected判断是否发生重定向
      if (res.redirected) {
        window.location.href = res.url;
      } else {
        // 处理正常响应数据
        return res.json();
      }
      // 也可直接获取Location头
      // const location = res.headers.get('Location');
      // if (location) window.location.href = location;
    })
    .catch(err => console.error('请求失败:', err));
  

• 改用表单提交替代Fetch：如果业务场景允许，用HTML表单（可设置为隐藏）提交请求，浏览器会自动处理302重定向并触发页面导航，这是符合浏览器原生行为的方式。
  示例代码：

  <form id="hiddenForm" action="/your-api-path" method="POST" style="display: none;">
    <!-- 按需添加表单参数 -->
  </form>
  <script>
    document.getElementById('hiddenForm').submit();
  </script>
  

• 直接用window.location发起请求：如果是GET请求，直接通过window.location.href = '/your-api-path'发起请求，浏览器会自动处理后续的302重定向并完成页面导航，这是最直接的方式，完全不需要用Fetch。

补充：Fetch的mode参数确实不支持navigate，这个模式只适用于浏览器的原生导航操作（比如点击链接、地址栏输入URL），脚本发起的Fetch请求没法使用这个模式。

内容的提问来源于stack exchange，提问作者Ugo Evola