生产环境下部分移动端Safari请求出现Network Error问题求助

问题描述 #

生产环境ReactJS应用，通过Axios发起GraphQL POST请求，在iOS 11-16版本的iPhone/iPad Safari浏览器中出现异常：部分会话前10次请求正常，后续突然触发Axios底层Network Error，错误捕获后返回null响应，直接导致页面崩溃。进一步排查发现这类请求并未抵达负载均衡器，疑似被浏览器取消；通过iPhone屏蔽所有Cookie可稳定复现该问题，但Chrome、Firefox及桌面端Safari均无此异常。

已完成排查 #

• 所有请求采用HTTPS协议，证书已更新且验证有效
• 前后端同域，不存在跨域问题，生产环境无OPTIONS预检请求
• 请求Payload无任何非ASCII字符
• 设备不受管控，无法通过升级iOS版本解决
• 代码为标准Axios Client POST请求，仅配置两个Sentry错误日志拦截器
• 已排查请求取消逻辑、Nginx配置，均未发现异常

可能的修复方案 #

1. 调整Cookie属性 #

iOS Safari对Cookie的处理存在严格限制，尤其是会话中Cookie累积或属性配置不当可能触发请求拦截：

• 确保Cookie设置SameSite=Lax或SameSite=Strict，避免使用SameSite=None（iOS老版本对该属性支持存在兼容性问题）
• 所有Cookie必须添加Secure标记（因站点使用HTTPS）
• 检查单域名Cookie总大小，iOS Safari单域名Cookie上限约4KB，超出可能导致请求被拦截

2. 禁用Axios的withCredentials配置 #

虽然是同域请求，但默认携带Credentials可能触发iOS Safari的异常机制。尝试在Axios实例中关闭该配置：

const axiosInstance = axios.create({
  // 保留原有其他配置
  withCredentials: false
});

注：若后端依赖Cookie进行身份验证，需先确认同域下关闭withCredentials不影响验证逻辑（同域请求默认仍会携带会话Cookie）。

3. 添加请求重试与崩溃兜底逻辑 #

针对突发的请求取消问题，给Axios添加Network Error重试拦截器，同时在业务代码中对null响应做兜底处理：

// Axios响应拦截器：重试Network Error
axiosInstance.interceptors.response.use(
  res => res,
  err => {
    const originalReq = err.config;
    // 只重试Network Error，限制重试次数避免死循环
    if (err.message === 'Network Error' && !originalReq._retry) {
      originalReq._retry = true;
      return axiosInstance(originalReq);
    }
    return Promise.reject(err);
  }
);

// 业务请求处添加兜底
async function fetchData(query) {
  try {
    const res = await axiosInstance.post('/graphql', query);
    // 先判断响应是否为空，避免崩溃
    if (!res) {
      console.warn('请求返回空响应，触发兜底逻辑');
      // 这里添加页面友好提示或降级处理
      return;
    }
    // 正常处理响应数据
    return res.data;
  } catch (err) {
    if (err.message === 'Network Error') {
      // 显示重试提示或其他用户友好处理
      showRetryToast();
    }
    throw err;
  }
}

4. 拆分大体积GraphQL请求 #

如果单次GraphQL查询Payload过大，可能触发iOS Safari的请求限制。尝试将复杂查询拆分为多个小请求，或减少单次请求返回的数据量。

5. 排查Safari ITP机制影响 #

因为屏蔽Cookie可复现问题，可能是Safari智能跟踪预防（ITP）机制限制了Cookie使用：

• 尝试给Cookie添加Partitioned属性（iOS 15+支持），格式示例：Set-Cookie: name=value; Secure; SameSite=Lax; Partitioned;
• 移除请求头中不必要的自定义字段，避免触发Safari安全拦截

验证方式 #

• 调整Cookie属性后，测试屏蔽Cookie是否仍能复现问题
• 用Mac连接iOS设备，通过Safari开发者工具查看请求状态、Cookie详情及取消原因
• 使用Charles抓包，确认请求是否真的未发送至服务器

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