React项目Axios 404错误求助：Feed组件路由页面请求异常

核心问题出在子路由页面下的相对路径解析错误：

• 首页（localhost:3000）使用相对路径"posts/timeline/xxx"时，会基于根路径解析为/posts/timeline/xxx，配合代理或baseURL能正确转发到后端8800端口。
• 但在个人资料页面（localhost:3000/post/username），相对路径会被解析为/post/posts/timeline/xxx，直接请求前端3000端口的不存在路由，导致404。
• 另外你代码中Axios的baseURL配置处于注释状态，未实际生效。

方案1：使用根相对路径（推荐配合代理） #

将请求路径改为以斜杠开头，确保无论当前页面在哪个路由，请求都基于根路径发送：

const res = await axios.get("/posts/timeline/64e31eb40a9c1595ef8f425b");

同时确认package.json中的代理配置正确：

"proxy": "http://localhost:8800/api"

注意：如果后端的posts路由是通过app.use("/api/posts", postsRouter)挂载的，此配置会自动将前端的/posts/xxx请求转发到http://localhost:8800/api/posts/xxx，与后端接口匹配。

方案2：正确配置Axios全局baseURL #

取消注释组件中的baseURL设置，或者在项目入口文件（如index.js）中全局配置，确保所有Axios请求都指向后端：

// 在Feed组件或项目入口中添加
import axios from "axios";
axios.defaults.baseURL = "http://localhost:8800/api/";

之后请求路径保持相对路径即可：

const res = await axios.get("posts/timeline/64e31eb40a9c1595ef8f425b");

注意：baseURL末尾必须加斜杠，避免路径拼接时出现错误（如变成8800/apiposts/xxx）。

方案3：直接使用完整绝对路径（快速测试用） #

如果以上方法暂时不生效，可以直接写完整的后端接口地址跳过路径解析问题：

const res = await axios.get("http://localhost:8800/api/posts/timeline/64e31eb40a9c1595ef8f425b");

此方法适合临时测试，不推荐生产环境使用，建议优先用前两种方案。

1. 确认后端服务正常运行在8800端口，并且接口GET /api/posts/timeline/:userId可以通过Postman等工具正常返回数据。
2. 检查后端路由的挂载路径：如果你的posts路由是直接挂载在根路径（app.use("/posts", postsRouter)），则代理配置需改为"proxy": "http://localhost:8800"。
3. 修改配置后务必重启前后端服务，确保配置生效。

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