如何修改fetch响应的body内容并返回修改后的响应？

你遇到的核心问题是：fetch 返回的 Response 对象是不可变的，直接修改读取到的文本不会影响原响应。正确的做法是基于修改后的内容，创建一个新的 Response 对象返回，同时保留原响应的关键信息（比如响应头）。

修正后的代码 #

const fetchResponse = await fetch(event.request);

// 读取原响应文本并完成替换修改
const modifiedText = await fetchResponse.text().then(text => 
  text.replace("MARCADOR1", "ON-LINE")
);

// 基于修改后的文本创建新响应，复用原响应的状态码、状态文本和响应头
const modifiedResponse = new Response(modifiedText, {
  status: fetchResponse.status,
  statusText: fetchResponse.statusText,
  headers: fetchResponse.headers
});

return modifiedResponse;

关键说明 #

• 新的 Response 构造函数第一个参数传入修改后的响应体，第二个参数配置对象复用原响应的核心属性，保证转发的响应和原响应的基本行为一致。
• Content-Length 无需手动设置，浏览器会自动根据修改后的文本长度计算并填充。

扩展：处理JSON格式响应 #

如果原响应是JSON数据，可以先解析为对象修改，再转回字符串：

const fetchResponse = await fetch(event.request);
const originalData = await fetchResponse.json();
originalData.targetField = "ON-LINE"; // 修改目标字段
const modifiedData = JSON.stringify(originalData);

const modifiedResponse = new Response(modifiedData, {
  status: fetchResponse.status,
  statusText: fetchResponse.statusText,
  headers: new Headers(fetchResponse.headers)
});
// 确保响应类型保持为application/json
modifiedResponse.headers.set("Content-Type", "application/json");

return modifiedResponse;

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