Firefox中Fetch请求失败问题排查求助

我之前碰到过Firefox下Fetch提交表单的类似问题，结合你的代码和场景，分享几个可能的原因和解决思路：

1. 检查Fetch URL的协议头 #

你的请求URL是formbackend.com/mylink，缺少https://协议前缀。Chrome、Safari等浏览器可能会自动补全当前页面的协议（比如如果你的页面是HTTPS的），但Firefox在跨域请求场景下对这种相对URL的处理更严格，会直接导致请求失败，甚至可能静默无日志输出。

修复方式：给URL加上完整的协议头：

let requestUrl = "https://formbackend.com/mylink";

2. 完善错误捕获逻辑 #

Fetch API的特性是：只有网络层面的错误（比如请求无法发送、连接中断）才会触发catch回调；如果服务器返回了4xx/5xx的错误状态码，Fetch依然会进入then回调，只是response.ok会是false。

你当前的代码只处理了response.ok为true的情况，当响应状态异常时没有任何处理，这可能导致流程卡住，甚至被其他逻辑间接触发错误页跳转，却没有日志。

修复方式：在then中主动抛出非ok响应的错误，让catch能捕获并打印具体信息：

.then((response) => {
  // 先捕获HTTP错误状态码
  if (!response.ok) {
    throw new Error(`请求失败，状态码：${response.status}`);
  }
  // 原来的成功逻辑
  console.log("fetch response ok");
  window.location.href = redirectUrl;
  localStorage.removeItem(storageID);
})

3. 避免手动设置Content-Type头 #

当Fetch的body是FormData对象时，浏览器会自动生成正确的Content-Type头（包含multipart/form-data和对应的boundary）。如果手动设置了这个头，反而会覆盖浏览器生成的正确值，导致服务器无法解析FormData，尤其是Firefox对这种不匹配的头处理更严格。

注意：确保你的requestOptions中没有手动添加headers: { "Content-Type": "multipart/form-data" }这类配置。

4. 用Firefox开发者工具深挖请求细节 #

虽然控制台没有日志，但Firefox的网络面板能帮你看到请求的完整生命周期：

1. 打开开发者工具（F12），切换到「网络」标签
2. 提交表单，查看对应的Fetch请求
3. 检查请求的「状态码」「请求头」「响应头」，确认是否有CORS错误、请求被拦截或者服务器返回异常

比如如果看到CORS相关的错误，需要确认formbackend的CORS配置是否允许你的域名请求；如果是404状态码，说明URL路径有误。

修改后的完整代码示例 #

var requestOptions = { 
  method: "POST", 
  body: new FormData(event.target), 
  redirect: "follow"
};
// 补全协议头的URL
let requestUrl = "https://formbackend.com/mylink";
fetch(requestUrl, requestOptions)
 .then((response) => {
   // 捕获HTTP错误状态
   if (!response.ok) {
     throw new Error(`Request failed with status: ${response.status}`);
   }
   console.log("fetch response ok");
   window.location.href = redirectUrl;
   localStorage.removeItem(storageID);
 })
 .catch((error) => {
   console.error("Error: ", error);
   window.location.href = "/fehler/";
 });

先从补全URL协议头和完善错误捕获开始测试，应该能解决大部分问题，如果还有异常，用网络面板查看具体请求信息就能定位到根源了。

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