fetch请求报错TypeError: Failed to fetch，Node.js路由问题排查

阿华AIGC实验室

2026-5-29

排查 Failed to fetch 错误的几个关键方向

看起来你遇到的是fetch请求在Promise阶段抛出的未捕获错误，结合你的代码，我整理了几个最可能的原因和对应的排查/解决方法：

1. 跨域请求问题（最常见）

如果你的页面不是通过 http://localhost:3000 访问的（比如直接双击打开本地HTML文件，用的是file://协议），那向http://localhost:3000发送POST请求就会触发**跨域资源共享（CORS）**限制，浏览器会直接拦截请求，抛出Failed to fetch错误。

解决方法：

确保你是通过服务器地址访问页面：启动Express服务后，在浏览器输入http://localhost:3000加载页面，再点击按钮发送请求。

2. Express未配置JSON请求体解析

Express默认不会自动解析JSON格式的请求体，如果你的后端没有配置express.json()中间件，那么req.body会是undefined，可能导致POST路由代码抛出异常，服务器返回500错误（若服务器崩溃或无响应，就会触发fetch的reject）。

解决方法：
在你的Express主文件（比如app.js）中添加以下代码，放在路由注册之前：

app.use(express.json());

3. 未捕获后端异步错误

你的POST路由是async函数，但如果内部异步操作（你省略的......部分）抛出未处理的异常，会导致服务器无法正确响应请求，甚至崩溃，进而让fetch请求失败。

解决方法：

用try/catch包裹异步逻辑，捕获并处理错误：

router.post('/', async function(req, res) {
  try {
    // 你的业务逻辑......
    res.json(info);
  } catch (err) {
    console.error(err);
    res.status(500).json({ error: '服务器内部错误' });
  }
});

打开服务器控制台，查看是否有报错信息，这能快速定位问题根源。

4. 给fetch添加错误捕获逻辑

你的前端代码没有处理fetch的Promise异常，导致错误直接冒泡成未捕获的Promise错误。添加catch块不仅能避免控制台报错，还能打印更详细的错误信息：

修改后的fetch代码：

document.getElementById('go').addEventListener('click', getdata);

function getdata() {
  let start = document.getElementById('start').value;
  let end = document.getElementById('end').value;
  let options = { "start": start, "end": end };

  fetch('http://localhost:3000', {
    method: 'post',
    headers: {
      "Content-type": "application/json; charset=UTF-8"
    },
    body: JSON.stringify(options)
  })
  .then(function(res){
    if (!res.ok) {
      // 处理HTTP错误状态码（比如404、500）
      throw new Error(`HTTP error! status: ${res.status}`);
    }
    return res.json();
  })
  .then(function(data){
    console.log(data);
  })
  .catch(function(err) {
    console.log('请求失败:', err); // 这里会打印具体的错误原因
  });
}