React调用Express+MongoDB后端接口报Failed to fetch错误求助

常见错误原因及解决方案 #

1. 跨域资源共享（CORS）问题 #

这是最常见的触发原因——React开发服务器和Express后端默认运行在不同端口，浏览器会拦截跨域请求。

• 解决方法：在Express后端安装并配置cors中间件

  npm install cors
  

  在后端主文件（如app.js）中添加：

  const cors = require('cors');
  app.use(cors()); // 开发环境允许所有跨域请求，生产环境可配置具体域名限制
  

2. 请求路径/端口不匹配 #

• 确保后端服务已启动，且前端请求的路径、端口与后端一致。比如后端运行在http://localhost:5000，前端fetch需写完整路径：

  const res = await fetch("http://localhost:5000/register", { ... })
  

  或在React项目的package.json中配置代理（开发环境推荐）：

  "proxy": "http://localhost:5000"
  

  配置后前端可直接用/register发起请求，代理会自动转发到后端。

3. 后端代码逻辑错误 #

你的后端代码存在一个致命问题：检测到数据缺失时发送了响应，但未终止函数，导致后续代码继续执行并尝试再次发送响应，引发服务器内部错误，最终导致前端fetch失败。

• 修正后端代码：在每个响应语句后添加return终止函数，同时使用更语义化的HTTP状态码：

  router.post("/register", async (req, res) => {
    const { name, age, country, email } = req.body;
  
    if (!name || !age || !country || !email) {
      return res.status(400).send("Some data is missing"); // 400表示客户端参数错误，加return终止函数
    }
  
    try {
      const preuser = await Crud.findOne({ email: email });
      console.log(preuser);
  
      if (preuser) {
        return res.status(409).send("The user already exists"); // 409表示资源冲突，更合理
      } 
      
      const addUser = new Crud({
        name,
        age,
        country,
        email,
      });
  
      const savedUser = await addUser.save();
      res.status(201).json(savedUser);
      console.log(savedUser);
      
    } catch (error) {
      res.status(500).send("Server error: " + error.message); // 500表示服务器内部错误
    }
  });
  

4. 前端未正确处理fetch错误 #

fetch API仅在网络故障时抛出错误，HTTP状态码错误（如404、500）不会自动触发reject，需手动处理并包裹try-catch捕获异常：

• 修正前端addData函数：

  const addData = async (e) => {
    e.preventDefault();
  
    const { name, age, country, email } = values;
  
    try {
      const res = await fetch("/register", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          name,
          age,
          country,
          email,
        }),
      });
  
      if (!res.ok) { // 主动检查响应状态是否成功
        const errorText = await res.text();
        throw new Error(errorText || `HTTP error! status: ${res.status}`);
      }
  
      const data = await res.json();
      console.log(data);
      console.log("Data added successfully");
    } catch (err) {
      console.error("请求失败:", err.message);
    }
  };
  

从后端获取数据（GET请求示例） #

如果需要从后端拉取数据，可参考以下流程：

后端添加GET接口 #

router.get("/users", async (req, res) => {
  try {
    const users = await Crud.find();
    res.status(200).json(users);
  } catch (error) {
    res.status(500).send("Server error: " + error.message);
  }
});

前端调用GET接口获取数据 #

import { useState, useEffect } from 'react';

const UserList = () => {
  const [users, setUsers] = useState([]);

  const fetchUsers = async () => {
    try {
      const res = await fetch("/users");
      if (!res.ok) {
        throw new Error(`HTTP error! status: ${res.status}`);
      }
      const data = await res.json();
      setUsers(data);
    } catch (err) {
      console.error("获取用户失败:", err.message);
    }
  };

  // 组件挂载时自动获取数据
  useEffect(() => {
    fetchUsers();
  }, []);

  return (
    <div>
      {users.map(user => (
        <div key={user._id}>
          <p>{user.name} - {user.email}</p>
        </div>
      ))}
    </div>
  );
};

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