JS中XMLHttpRequest及Fetch在Safari v13.1请求404问题求助

Hey there, let's tackle this Safari 13.1 404 issue you're hitting with your order detail API calls. I've run into similar quirks with older Safari versions before, so here's what you can try from a JavaScript perspective:

可能的问题根源 #

Safari 13.1对请求头和URL格式的处理比Chrome更严格，几个常见触发点：

• GET请求里没必要的Content-Type头可能导致请求解析异常
• 订单ID未编码，包含特殊字符时Safari无法正确解析URL
• 缓存策略的差异，哪怕设置了no-cache，Safari的缓存处理逻辑也可能和Chrome不同
• 跨域相关的限制被伪装成了404错误

1. 移除GET请求中多余的Content-Type头 #

GET请求本身不会携带请求体，设置Content-Type: application/json属于冗余操作，反而会干扰旧版Safari的请求处理逻辑。调整后的代码如下：

优化后的XHR代码

var xhr = new XMLHttpRequest();
console.log(xhr);
xhr.onreadystatechange = function () {
  if (xhr.readyState !== 4) return;
  try {
    console.log(JSON.parse(xhr.responseText));
  } catch (e) {
    console.error('解析响应失败:', e);
  }
};
const orderID = buildOrderID();
// 对订单ID进行URL编码，避免特殊字符问题
xhr.open("GET", "/api/storefront/orders/" + encodeURIComponent(orderID), true);
xhr.setRequestHeader("Cache-Control", "no-cache");
// 显式添加Accept头，告知服务器期望JSON格式响应
xhr.setRequestHeader("Accept", "application/json");
xhr.send();

优化后的Fetch代码

const orderID = buildOrderID();
fetch("/api/storefront/orders/" + encodeURIComponent(orderID), {
  method: 'GET',
  headers: {
    'Cache-Control': 'no-cache',
    'Accept': 'application/json'
  },
  credentials: 'same-origin' // 确保同域请求携带Cookie（如果API需要身份验证）
})
.then(function (response) {
  // 显式检查响应状态，避免把404当成正常响应处理
  if (!response.ok) {
    throw new Error(`HTTP请求错误！状态码: ${response.status}`);
  }
  return response.json();
})
.then(function (data) {
  console.log(data);
})
.catch(function (err) {
  console.warn('请求出错:', err);
});

2. 对订单ID进行URL编码 #

旧版Safari对URL中的特殊字符解析很敏感，用encodeURIComponent()包裹buildOrderID()的返回值，可以确保任何非ASCII字符或保留符号都被正确转义，避免因URL格式错误导致的404。

3. 显式设置credentials: 'same-origin' #

如果你的API依赖Cookie进行身份验证，Safari的Fetch请求默认不会携带Cookie，加上这个配置可以和Chrome的默认行为保持一致，避免因身份验证失败返回的404。

4. 更严谨的错误排查 #

• 在构造URL前添加日志，确认Chrome和Safari中生成的订单ID和请求URL完全一致：

  const orderID = buildOrderID();
  console.log('当前订单ID:', orderID);
  console.log('完整请求URL:', "/api/storefront/orders/" + encodeURIComponent(orderID));
  

• 打开Safari的开发者工具（开发 > 显示Web检查器），在网络标签页查看请求详情，检查是否有隐藏的跨域错误提示——有时Safari会把CORS错误伪装成404返回。

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