Get请求在Postman正常，React前端调用返回undefined求助

后端showStats接口在Postman中可正常返回包含defaultStats和monthlyApplications的对象，但React前端通过Axios的authFetch调用该接口时，返回结果为undefined。其他接口使用相同authFetch方式可正常工作，相关代码如下：

后端代码 #

const showStats = async (req, res) => {
    let stats = await Job.aggregate([
      { $match: { createdBy: new mongoose.Types.ObjectId(req.user.userId) } },
      { $group: { _id: '$status', count: {$sum:1 }}}
      
    ]);
    stats = stats.reduce((acc, curr) => {
        const { _id: title, count } = curr;
        acc[title] = count;
        return acc;
    }, {})

    const defaultStats = {
        pending: stats.pending || 0,
        interview: stats.interview || 0,
        declined: stats.declined || 0,
    };
    let monthlyApplications = [];
  
    res.status(StatusCodes.OK).json({ defaultStats, monthlyApplications });
  };

前端Axios配置 #

const AppProvider = ({children}) =>{
    const [state, dispatch] = useReducer(reducer, initialState)

    //axios
    const authFetch = axios.create({
        baseURL: '/api/v1',
    })
    authFetch.interceptors.request.use(
        (config) => {
          config.headers['Authorization'] = `Bearer ${state.token}`;
          return config;
        },
        (error) => {
          return Promise.reject(error);
        }
      );

    authFetch.interceptors.response.use(
        (response) => {
          return response;
        },
        (error) => {
          console.log(error.response)
          if (error.response.status === 401) {
            logoutUser();
          }
          return Promise.reject(error);
        }
      );

前端调用函数 #

const showStats = async () => {
        dispatch({ type: SHOW_STATS_BEGIN });
        try {
            const {data} = await authFetch('/jobs/stats')
            console.log(data)
            dispatch({ 
                type: SHOW_STATS_SUCCESS,
                payload: {
                    stats: data.defaultStats,
                    monthlyApplications: data.monthlyApplications,
                }
            })

        } catch (error) {
           console.log(error.response)
           //logoutUser() 
        }
      }

调用组件 #

import { useEffect } from "react"
import { useAppContext } from "../../context/AppContext"
import { StatsContainer, Loading, ChartsContainer } from "../../components"



const Stats = () => {
  const { showStats, isLoading, monthlyApplications } = useAppContext()
  useEffect(() => {
    showStats()
  }, [])

  if (isLoading) {
    return <Loading center />
  }
  return (
    <>
      <StatsContainer />
      {monthlyApplications.length > 0 && <ChartsContainer />}
    </>
  )
}
export default Stats

排查思路 #

• 检查请求细节：打开浏览器DevTools的Network面板，查看/jobs/stats请求的URL、HTTP方法、状态码，确认请求是否成功到达后端，返回的响应内容是什么。如果状态码是4xx/5xx，说明后端处理出错；如果是200但响应为空，再排查后端逻辑。
• 验证Authorization头：对比Postman和前端请求的Authorization头，确保前端携带的token和Postman一致且未过期。后端接口依赖req.user.userId，如果token无效会导致聚合查询无结果，但Postman正常的话，可能是前端token获取或存储有问题。
• 调试响应拦截器：在前端响应拦截器中添加console.log(response)，确认实际收到的响应数据是否正确，避免拦截器意外修改了响应内容。
• 后端日志排查：在后端showStats接口中添加console.log(stats, defaultStats)，确认即使没有匹配的Job数据，defaultStats也会生成包含三个0的对象，monthlyApplications是空数组，确保后端返回的JSON结构正确。
• 完善错误捕获：在前端catch块中打印完整的error对象（而非仅error.response），如果请求未到达后端，error.response会是undefined，完整错误信息能帮你定位是否是请求路径、跨域或其他网络问题。
• 修复useEffect依赖：组件中useEffect的依赖为空数组，若showStats函数每次渲染都会重新创建，可能导致useEffect未正确触发或捕获到旧的函数引用。可以用useCallback包裹showStats，并将其加入useEffect的依赖数组。
• 检查状态更新逻辑：确认SHOW_STATS_SUCCESS的reducer逻辑是否正确更新了monthlyApplications等状态，有可能不是接口返回undefined，而是状态未被正确赋值。

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