React项目Axios 500错误：无法获取ID的原因排查

问题详情 #

在React项目中尝试通过Axios获取单本书籍详情时，触发500 Internal Server Error，无法成功获取对应ID的数据。使用Postman测试相同请求也遇到同样问题，相关前端代码如下：

ShowBook.jsx #

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { useParams } from 'react-router-dom';
import BackButton from '../components/BackButton';
import Spinner from '../components/Spinner';

const ShowBook = () => {
  const [book, setBook] = useState({});
  const [loading, setLoading] = useState(false);
  const {id} = useParams();

  useEffect(() => {
    setLoading(true);
    axios
      .get(`http://localhost:5555/books/${id}`)
      .then((response) => {
        setBook(response.data);
        setLoading(false);
      })
      .catch((error) => {
        console.log(error);
        setLoading(false);
      });
  }, [id]);
  

  return (
    <div className='p-4'>
      <BackButton /> 
      <h1 className='text-3xl my-4'>Show Book</h1>
      {loading ? (
        <Spinner />
      ) : (
        <div className='flex flex-col border-2 border-sky-400 rounded-xl w-fit p-4'>
          <div className='my-4'>
            <span className='text-xl mr-4 text-gray-500'>Id</span>
            <span>{book._id}</span>
          </div>
          <div className='my-4'>
            <span className='text-xl mr-4 text-gray-500'>Title</span>
            <span>{book.title}</span>
          </div>
          <div className='my-4'>
            <span className='text-xl mr-4 text-gray-500'>Author</span>
            <span>{book.author}</span>
          </div>
          <div className='my-4'>
            <span className='text-xl mr-4 text-gray-500'>Publish Year</span>
            <span>{book.publishYear}</span>
          </div>
          <div className='my-4'>
            <span className='text-xl mr-4 text-gray-500'>Create Time</span>
            <span>{new Date(book.createdAt).toString()}</span>
          </div>
          <div className='my-4'>
            <span className='text-xl mr-4 text-gray-500'>Last Update Time</span>
            <span>{new Date(book.updatedAt).toString()}</span>
          </div>
        </div>
      )}
    </div>
  );
};

export default ShowBook;

App.jsx #

import React from 'react';
import { Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import CreateBook from './pages/CreateBooks';
import ShowBook from './pages/ShowBook';
import EditBook from './pages/EditBooks';
import DeleteBook from './pages/DeleteBooks';

const App = () => {
  return (
    <Routes>
      <Route path='/' element={<Home />} />
      <Route path='/books/create' element={<CreateBook />} />
      <Route path='/books/details/:id' element={<ShowBook />} />
      <Route path='/books/edit/:id' element={<EditBook />} />
      <Route path='/books/delete/:id' element={<DeleteBook />} />
    </Routes>
  );
};

export default App;

原因分析及解决步骤 #

500错误属于服务器内部错误，核心问题多出自后端，但前端也需要同步排查，以下是具体方向：

1. 验证后端API路径与逻辑 #

• 确认后端是否存在GET /books/:id的接口，检查是否有路径前缀（比如/api/books/:id），如果有，前端请求路径需要同步修改。
• 查看后端服务器日志，获取具体错误信息：
  • 常见错误：数据库查询时ID格式不匹配（比如MongoDB的ObjectID格式错误）、查询字段错误（比如用id而非_id查询）、目标ID不存在但后端未返回404而是抛出异常。
• 用Postman直接请求http://localhost:5555/books/[已知存在的书籍ID]，查看返回的错误详情，比如是否提示“Cast to ObjectId failed”或“Book not found”。

2. 确认前端ID参数传递正确性 #

• 在ShowBook组件的useEffect中添加日志：console.log('当前请求的ID:', id)，确认获取到的ID不为空、格式正确（比如MongoDB的ID是24位字符串）。
• 检查列表页跳转路径是否正确，比如跳转时是否使用了/books/details/${book._id}而非/books/details/${book.id}。

3. 服务器状态与CORS检查 #

• 确认后端服务正常运行在5555端口，可直接访问http://localhost:5555验证服务器是否在线。
• 检查后端是否配置了CORS，允许前端域名的跨域请求，避免因CORS配置间接导致请求异常。

4. 前端请求优化建议 #

• 在catch块中打印更详细的错误信息，便于快速定位：

  .catch((error) => {
    console.log('请求错误详情:', error.response?.data || error.message);
    setLoading(false);
  });
  

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