Node.js网页部署中fetch拦截POST响应出现JSON读取未定义错误

核心错误原因 #

你重写window.fetch时存在两个致命问题：

1. 没有调用原本的originalFetch发起网络请求，反而错误写了await(resource, config)——这个表达式只会返回config的值，完全没有实际请求行为，且重写的函数没有返回任何内容，导致fetch调用后返回的Promise最终解析为undefined，后续response.json()自然会因response未定义报错。
2. 你请求的是.html格式文件，就算修复fetch问题，调用response.json()也会失败，因为HTML内容无法被解析为JSON格式。

修复后的代码 #

<script>
   const {fetch: originalFetch } = window;
   window.fetch = async (...args) => {
      let [ resource, config ] = args;
      console.log("resource: " + resource);
      console.log("config: ", config); // 用逗号避免对象被转为字符串
      // 调用原生fetch发起请求并等待响应
      const response = await originalFetch(resource, config);
      console.log(" -- got response!");
      // 必须返回响应，否则后续then无法获取结果
      return response;
   }

   // 若要处理HTML内容，改用response.text()；若需JSON，需请求对应JSON接口
   fetch("/form-1.html", { method: 'POST'})
      .then ((response) => response.text())
      .then((data) => console.log(data));
</script>

额外说明 #

• npm install json完全多余，浏览器端的fetch本身支持JSON处理，这个包是Node.js环境工具，和浏览器场景无关。
• 若需要获取JSON数据，需确保后端提供的是返回Content-Type: application/json格式内容的接口，而非HTML文件。

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