Express服务器Fetch请求随机报错：TypeError: Failed to fetch 求助

针对你遇到的Express服务器与前端Fetch请求随机报错问题，可从以下几个方向排查修复：

1. 确保服务器稳定运行 #

你的服务器代码缺少端口监听的核心代码，添加以下内容启动服务：

// 放在所有路由配置之后
app.listen(3001, () => {
  console.log('Server running on http://localhost:3001');
});

同时添加全局错误捕获中间件，避免未处理的异常导致服务器崩溃：

// 放在所有路由和中间件之后
app.use((err, req, res, next) => {
  console.error('服务器异常:', err.stack);
  res.status(500).json({ error: '服务器内部错误' });
});

2. 完善前端Fetch的错误处理逻辑 #

Fetch仅在网络层面失败时触发catch，HTTP错误状态码（如401）不会自动进入捕获分支。补充响应状态判断，明确区分网络错误与业务错误：

fetch("http://localhost:3001/api", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(formData),
  })
    .then((response) => {
      if (!response.ok) {
        throw new Error(`请求失败，状态码: ${response.status}`);
      }
      return response.json();
    })
    .then((data) => {
      if (data.user) {
        alert(`Welcome, ${data.user.name}!`);
      } else {
        alert("User not found!");
      }
    })
    .catch((error) => {
      alert("Error fetching data:" + error);
    });

3. 优化CORS配置 #

显式指定前端Origin，避免通配符可能引发的潜在跨域问题：

// 替换原有的app.use(cors());
app.use(cors({
  origin: "http://localhost:你的前端端口号", // 例：前端运行在3000则填"http://localhost:3000"
  credentials: true // 若需携带Cookie则开启
}));

4. 验证请求数据完整性 #

在前端发起请求前，确认formData始终包含email和password字段，避免因数据缺失导致服务器处理异常：

console.log('请求数据:', formData); // 检查每次请求的数据结构
fetch("http://localhost:3001/api", ...)

5. 排查网络环境问题 #

• 尝试用127.0.0.1替代localhost发起请求，规避DNS解析异常：

  fetch("http://127.0.0.1:3001/api", ...)
  

• 检查本地防火墙是否拦截3001端口通信
• 确认无其他程序占用3001端口

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