XMLHttpRequest POST请求在Firefox中异常，其他浏览器正常

我有一个网页通过JavaScript的XMLHttpRequest向Python Flask应用POST JSON数据，在Chrome、Edge、Opera、Android等环境下均运行正常，但在Firefox中出现报错。执行代码后触发“Server Error 02”提示，状态码为0，且调试器网络标签中无POST请求记录。相关JavaScript代码如下：

const xhr = new XMLHttpRequest();

xhr.open("POST", url);
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xhr.setRequestHeader("Authorization", authdata);

xhr.onreadystatechange = function(ev) {
   //2 - request sent, 3 - something back, 4 - full response
   //console.log(xhr.readyState);
   if (xhr.readyState === 4) {
      switch (xhr.status) {
      case 200:
      case 304:
        console.log("OK or Not Modified (cached)", xhr.status);
        console.log(xhr.responseText);
        break;
      case 201:
        console.log("Created", xhr.status);
        console.log(xhr.responseText);
        break;
      case 400:
        console.log("Bad Request", xhr.status);
        alert("Bad Request");
        break;
      case 401:
      case 403:
        console.log("Not Authorized or Forbidden", xhr.status);
        alert("Not Authorized or Forbidden");
        break;
      case 404:
        console.log("Not Found", xhr.status);
        alert("404 Not Found");
        break;
      case 500:
        console.log("Server Side Error", xhr.status);
        alert("Server Error 01 Code: " + xhr.status.toString());
        break;
      default:
        console.log("Some other code: ", xhr.status);
        alert("Server Error 02 Code: " + xhr.status.toString());
      }
  }
};

xhr.onerror = function(err) {
  console.warn(err);
  alert("Server Error 99", err);
};

edata = JSON.stringify({ "domain": "workdomain", "zonedata": "data" });
xhr.send(edata);

状态码为0且无网络请求记录，说明请求根本没发送到服务器，不是Firefox的原生bug，而是它的安全策略或请求前置校验更严格，导致请求被浏览器拦截。以下是具体排查方向：

• CORS预请求未正确处理：
  由于请求带了Authorization自定义头，属于非简单请求，浏览器会先发送OPTIONS预请求。如果Flask后端未正确响应OPTIONS请求，Firefox会直接拦截后续的POST请求。解决方法：

  • 使用flask-cors扩展：安装后全局启用CORS，或针对特定路由配置，确保允许Authorization头和POST方法；
  • 手动添加OPTIONS路由：在Flask中编写处理OPTIONS请求的接口，返回包含Access-Control-Allow-Origin、Access-Control-Allow-Headers（需包含Authorization）、Access-Control-Allow-Methods的响应头。

• 混合内容拦截：
  如果当前网页是HTTP协议，而请求的url是HTTPS（反之亦然），Firefox默认会阻止这种混合内容请求。排查：

  • 检查页面和请求URL的协议是否一致；
  • 临时测试：在Firefox地址栏输入about:config，将security.mixed_content.block_active_content设为false，再重试请求，若正常则说明是混合内容问题，需统一协议。

• 跟踪保护/隐私策略拦截：
  Firefox的跟踪保护功能可能会拦截跨域请求。排查：

  • 临时关闭跟踪保护：点击地址栏的盾牌图标，选择“禁用跟踪保护”，重试请求；
  • 若正常，可将目标域名添加到跟踪保护例外列表。

• URL路径解析差异：
  Firefox对相对路径的解析可能和其他浏览器有细微差别，比如是否带尾部斜杠。检查url变量是否正确，比如相对路径是否应该是/api/xxx而非api/xxx。

• 补充错误捕获：
  代码中仅监听了onreadystatechange和onerror，建议添加onabort事件监听，捕获请求被中止的情况，便于排查：

  xhr.onabort = function() {
    console.log("请求被中止");
    alert("请求被中止");
  };
  

这种情况大概率是Firefox的安全拦截规则导致，而非浏览器本身bug，按上述步骤逐一排查即可解决。

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