jQuery Ajax仅在Safari中随机失败，其他浏览器正常求助

我之前也碰到过Safari这个诡异的随机失败问题，尤其是本地测试环境，结合你的报错信息和代码片段，给你几个排查方向和解决方案：

1. 检查请求是否被意外取消 #

Safari在处理异步请求时，如果页面有任何可能导致上下文变化的操作（比如按钮点击后的默认跳转、DOM元素销毁，甚至是某些浏览器默认行为拦截），会直接终止请求，返回readyState:0, status:0。

解决方案：

• 确保触发writeToDB()的事件阻止了默认行为：

// 假设是按钮点击触发请求
document.querySelector('#submit-btn').addEventListener('click', function(e) {
  e.preventDefault(); // 阻止默认的表单提交或页面跳转
  writeToDB();
});

• 避免在请求未完成时进行页面导航、刷新或DOM卸载操作。

2. 修复数据编码的兼容性问题 #

你用到的btoa(unescape(encodeURIComponent(JSON.stringify(data))))编码组合，在Safari下可能存在兼容性差异——尤其是当JSON包含特殊字符时，unescape的处理逻辑和Chrome/Firefox不完全一致。

解决方案：
改用更兼容的编码方式，简化编码流程：

function writeToDB() {
  var data = { setting: 'some data' };
  // 直接对JSON字符串做URI编码，避免unescape的兼容性坑
  var encodedData = encodeURIComponent(JSON.stringify(data));
  
  $.ajax({
    type: "POST",
    url: 'Admin/write_to_db',
    data: { data: encodedData },
    // 显式指定content-type，确保服务器正确解析请求
    contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
    success: function(response) {
      console.log('写入成功:', response);
    },
    error: function(xhr, status, error) {
      console.log('write failed :', JSON.stringify(xhr));
    }
  });
}

如果必须使用Base64编码，推荐使用更兼容的Polyfill替代原生btoa，避免特殊字符解析问题。

3. 禁用Safari的请求缓存 #

Safari会对POST请求也进行缓存（尤其是本地环境），这是导致随机失败的常见原因之一。

解决方案：
在Ajax配置中添加cache: false，或者给URL追加时间戳参数：

$.ajax({
  type: "POST",
  url: 'Admin/write_to_db?' + new Date().getTime(), // 时间戳避免缓存
  cache: false,
  data: { data: encodedData },
  // 其他配置...
});

4. 检查本地测试的协议问题 #

如果你的本地测试是直接打开HTML文件（file://协议），Safari的同源策略会比Chrome/Firefox严格很多，直接阻止Ajax请求。

解决方案：
启动一个本地HTTP服务器（比如用Python的python -m http.server或Node.js的http-server），通过http://localhost访问页面，而非直接打开本地文件。

5. 显式指定异步模式 #

虽然jQuery Ajax默认是异步的，但在Safari中，显式指定async: true可以避免一些上下文丢失的问题：

$.ajax({
  type: "POST",
  url: 'Admin/write_to_db',
  async: true,
  // 其他配置...
});

优先试试第1、3点，这两个是本地环境Safari触发该问题的高频原因，应该能解决大部分情况。

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