MERN应用通过ID获取图书详情出现404错误求助

以下是针对你遇到问题的具体排查方向和解决方案：

1. 验证前端传递的ID是否正确 #

先确认前端从路由拿到的id和Postman中使用的ID完全一致：

• 在useEffect中添加日志打印：

useEffect(() =>{
    console.log("当前路由参数ID:", id); // 检查输出是否为有效ID
    const exchangeDetails = async () =>{
        // ...原有代码
    }
    exchangeDetails()
},[id])

如果输出为空或错误值，检查路由定义是否匹配——比如路由是/exchange/:bookId，但前端用了const {id} = useParams()，此时参数名不匹配会导致拿到错误的ID。

2. 核对请求URL的完整性 #

Postman能正常请求，但前端404，大概率是请求地址不一致：

• 在getExchangeAPI中打印最终请求URL：

export const getExchangeAPI = async (id, reqHeader) =>{
    const fullUrl = `${SERVER_URL}/books/exchange/${id}`;
    console.log("前端请求URL:", fullUrl); // 和Postman的请求地址对比
    return await commonAPI("GET", fullUrl, "", reqHeader)
}

重点检查：

• SERVER_URL是否配置正确（比如Postman用http://localhost:5000，前端是否误写为/api或多了斜杠）
• 路径拼接是否有多余符号（比如SERVER_URL末尾带斜杠，导致拼接后出现//books/exchange/${id}）

3. 补全必要的请求头 #

Postman可能携带了后端要求的身份验证头（如Token），但前端调用getExchangeAPI时未传递reqHeader参数：

• 确认后端接口是否需要权限验证，如果需要，前端需传递包含Token的请求头：

// 从本地存储获取登录Token
const token = localStorage.getItem("authToken");
const reqHeader = {
  "Authorization": `Bearer ${token}`,
  "Content-Type": "application/json"
};

// 在useEffect中修改调用方式
const result = await getExchangeAPI(id, reqHeader);

部分后端会把未授权的请求返回404而非401，这种情况补全请求头即可解决。

4. 检查路由代理配置（若使用create-react-app） #

如果前端通过package.json配置了代理（如"proxy": "http://localhost:5000"），需确保SERVER_URL设置为""或"/"，否则会导致请求地址重复拼接，引发404。

5. 确认路径大小写一致性 #

Linux环境下的Node.js服务器对路径大小写敏感，若后端路由是/books/Exchange/${id}（大写E），但前端请求的是/books/exchange/${id}，会直接返回404。需完全匹配后端路由的大小写。

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