React前端通过Axios调用Express后端接口报错求助

报错核心原因 #

从控制台报错信息GET http://locahost:8800/api/post/timeline/63c29c2fe9a410383d4bcb98 net::ERR_NAME_NOT_RESOLVED可定位两个关键问题：

1. 域名拼写错误：locahost是笔误，正确应为localhost
2. 请求URL不完整：前端Axios请求路径缺少完整域名、端口和API前缀

直接修复方案 #

修改前端feed.js中的Axios请求代码，补全正确的完整URL：

useEffect(()=>{
  const fetchPosts=async ()=>{
    // 修正域名拼写，补全完整请求路径
    const res=await axios.get("http://localhost:8800/api/post/timeline/63c29c2fe9a410383d4bcb98");
    console.log(res);
    // 将返回数据存入state供组件使用
    setPosts(res.data);
  };
  fetchPosts();
},[])

更优雅的优化：配置Axios默认BaseURL #

为避免每次请求重复写完整域名和前缀，可统一配置Axios的默认baseURL：

1. 在项目中创建axios.js配置文件：

import axios from 'axios';

const instance = axios.create({
  baseURL: 'http://localhost:8800/api'
});

export default instance;

2. 在feed.js中导入配置好的Axios实例：

import axios from './axios'; // 根据实际文件路径调整

// 后续请求只需写相对路径
const res=await axios.get("/post/timeline/63c29c2fe9a410383d4bcb98");

额外后端路由规范优化 #

当前问题虽为前端请求错误，但后端posts.js部分路由不符合RESTful规范，建议调整：

• 更新帖子路由改为put方法（原用post），并补全await：

router.put("/:id", async (req, res) => {
  try {
    const post = await Post.findById(req.params.id);
    if (post.userId === req.body.userId) {
      await post.updateOne({ $set: req.body });
      res.status(200).json("帖子已更新！");
    } else {
      res.status(403).json("你只能更新自己的帖子！");
    }
  } catch (err) {
    res.status(500).json(err);
  }
});

• 删除帖子路由改为delete方法（原用post）：

router.delete("/:id", async (req, res) => {
  try {
    const post = await Post.findById(req.params.id);
    if (post.userId === req.body.userId) {
      await Post.findByIdAndDelete(req.params.id);
      res.status(200).json("帖子已删除！");
    } else {
      res.status(403).json("你只能删除自己的帖子！");
    }
  } catch (err) {
    res.status(500).json(err);
  }
});

内容的提问来源于stack exchange，提问作者Robert Downey Jr.