Safari 11.1中带控制台日志的Fetch请求失效（不支持ReadableStream上传）

这个问题我之前也碰到过，Safari 11.1对Fetch API的Request对象处理确实有一些兼容性坑。你遇到的报错是因为当时Safari还不支持上传ReadableStream，而你的代码构造Request的方式触发了这个不兼容的情况。

问题根源 #

你原来的代码先给options.headers赋值为空对象，之后又重新替换成Headers实例，这种动态修改options属性的操作，会让Safari 11.1的Fetch API在解析Request时出现混淆，错误地将你的字符串body当作ReadableStream来处理，从而抛出那个报错。

解决方案 #

这里给你几个可行的修复方案，你可以根据自己的代码结构选择：

方案1：直接在fetch中传入参数（推荐，最简单）

如果不需要单独构造Request对象，直接把请求参数传给fetch方法，跳过Request实例的创建，能直接绕过这个兼容问题：

const postData = JSON.stringify({ id: "xxx", note: "yyy" });

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  credentials: 'include',
  headers: {
    'Content-Type': 'application/json; charset=utf-8'
  },
  body: postData
})
.then(response => response.json())
.then(result => console.log('请求结果:', result))
.catch(error => console.error('请求失败:', error));

方案2：正确构造Request对象（如果必须用Request）

如果你的业务逻辑需要用到Request实例，那要调整options的构造顺序，一开始就把headers配置好，不要动态修改：

// 先创建并配置Headers
const requestHeaders = new window.Headers();
requestHeaders.append('Content-Type', 'application/json; charset=utf-8');

// 直接在options中传入配置好的headers
const options = { 
  method: 'POST', 
  credentials: 'include', 
  body: JSON.stringify({ id: "xxx", note: "yyy" }), 
  headers: requestHeaders 
};

function getRequest() { 
  return new window.Request('https://jsonplaceholder.typicode.com/posts', options); 
}

const newRe = getRequest(); 
console.log(newRe); 
fetch(newRe)
.then(response => response.json())
.then(result => console.log('请求结果:', result))
.catch(error => console.error('请求失败:', error));

方案3：用普通对象代替Headers实例

如果你不需要Headers的特殊方法，直接用普通对象定义headers，兼容性会更好：

const options = { 
  method: 'POST', 
  credentials: 'include', 
  body: JSON.stringify({ id: "xxx", note: "yyy" }), 
  headers: {
    'Content-Type': 'application/json; charset=utf-8'
  }
};

function getRequest() { 
  return new window.Request('https://jsonplaceholder.typicode.com/posts', options); 
}

const newRe = getRequest(); 
console.log(newRe); 
fetch(newRe)
.then(response => response.json())
.then(result => console.log('请求结果:', result))
.catch(error => console.error('请求失败:', error));

额外说明 #

Safari 11.1属于比较旧的版本了，它对Fetch API的支持并不完善，除了这个ReadableStream的问题，还有一些其他小坑。如果条件允许，建议引导用户升级到更高版本的Safari，但如果必须兼容这个版本，上面的方案应该能解决你的问题。

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