Axios请求体获取信息报错：跨域及Promise未捕获问题排查

错误一：跨源请求被阻止（Cross Origin Request Block） #

尽管你已在Express中引入cors中间件，仍需确认以下关键点：

• 确保已正确安装cors依赖：执行npm install cors（未安装的话）
• 修正后端端口日志：你的代码中app.listen(8000)，但控制台输出写的是Server is running on port 5174，这会造成混淆，改为正确端口：

  app.listen(8000, () => {
    console.log(`Server is running on port 8000.`);
  });
  

• 核对前端请求地址http://localhost:8000/message与后端运行端口完全一致，无拼写错误。

错误二：未捕获Promise错误 #

该错误源于Axios请求的处理逻辑和数据传递问题，具体修复如下：

1. 统一Promise处理方式
   你的addTodos是async函数，同时混用await和.then/.catch会导致Promise链异常，建议改用try/catch：

   const addTodos = async (e) => {
     if (val === "") return;
     e.preventDefault();
   
     try {
       // 注意：应发送新输入的val，而非整个todos数组
       const response = await axios.post("http://localhost:8000/message", { todo: val });
       console.log(response);
       // 请求成功后再更新本地状态，避免请求失败时状态异常
       setTodos([...todos, val]);
       setVal("");
       // 刷新列表数据
       await fetchProducts();
     } catch (error) {
       // 打印完整错误信息便于排查
       console.error("请求失败:", error.response?.data || error.message);
     }
   };
   

2. 修正前后端数据字段匹配
   前端原发送的是{ todos }，但后端需接收单个新todo，调整后端POST接口：

   app.post("/message", async (req, res) => {
     try {
       const { todo } = req.body; // 对应前端发送的todo字段
       console.log(todo);
       // 新增数据库插入逻辑（原代码未写入数据库，导致GET请求无法获取新数据）
       await client.query(`INSERT INTO todo (todo) VALUES ($1)`, [todo]);
       res.send({ success: true, message: "Todo添加成功" });
     } catch (dbError) {
       console.error("数据库插入失败:", dbError);
       res.status(500).send({ error: "添加Todo失败" });
     }
   });
   

3. 优化数据刷新逻辑
   原useEffect仅在组件挂载时执行一次，添加新todo后不会自动刷新，需在请求成功后重新调用数据获取函数：

   // 提取fetchProducts为可复用函数
   const fetchProducts = async () => {
     try {
       const res = await axios.get("http://localhost:8000/message");
       setMessage(res.data);
     } catch (error) {
       console.error("获取数据失败:", error);
     }
   };
   
   // 在addTodos的try块中调用fetchProducts刷新数据
   

其他优化点 #

• 前端渲染message时，添加长度判断避免空数组报错：

  {message.length > 0 && message.map((e, index) => (
    <div key={index}>{e.todo}</div>
  ))}
  

• 后端数据库操作添加错误捕获，避免未处理的Promise异常：

  app.get("/message", async (req, res) => {
    try {
      const { rows } = await client.query(`SELECT * from todo`);
      res.send(rows);
    } catch (dbError) {
      console.error("数据库查询失败:", dbError);
      res.status(500).send({ error: "获取Todo列表失败" });
    }
  });
  

内容的提问来源于stack exchange，提问作者jj-ammar