已配置Express Router仍遇Axios 404错误，求排查方案

我在React项目中使用Axios发起请求时，始终收到404错误，尽管已经通过Express Router配置了对应的后端路由。以下是我的前后端代码：

前端React+Axios代码 #

import React, { useEffect, useState } from 'react';
import axios from 'axios';

function RecruitStatus() {
  const [Reviewers, setReviewers] = useState([])

  const getReviewers = () => {
    axios.get('/getprojectRequests')
        .then(response => {
            if (response.data.success) {
                  setReviewers(response.data.reviewers)
            } else {
                alert('Failed to fetch product datas')
            }
        })
      }

  useEffect(() => {
    getReviewers()
  }, [])
}

后端Express Router代码 #

const express = require('express');
const router = express.Router();
const { projectRequests } = require("../models/projectRequests");

router.get("/getprojectRequests", (req, res) => {
    projectRequests
        .find()
        .exec((err, reviewers) => {
            if (err) return res.status(400).json({ success: false, err })
            res.status(200).json({ success: true, reviewers})
        })
});

可能的解决方向 #

• 确保Express主应用挂载了路由：你只定义了Router实例，但需要在Express主文件（如app.js）中注册它。示例：

  // 主app.js中
  const projectRouter = require('./routes/你的路由文件名'); // 引入路由文件
  app.use('/', projectRouter); // 挂载路由，若要加前缀可写app.use('/api', projectRouter)
  

  如果加了前缀/api，前端请求地址要改为/api/getprojectRequests。

• 配置跨域/代理（前后端端口不同时）：若后端运行在3001端口，前端在3000端口，需处理跨域：

  • 方式1：在React项目中创建src/setupProxy.js（Create React App环境），配置代理：

    const { createProxyMiddleware } = require('http-proxy-middleware');
    module.exports = function(app) {
      app.use(
        '/getprojectRequests',
        createProxyMiddleware({
          target: 'http://localhost:3001',
          changeOrigin: true,
        })
      );
    };
    

  • 方式2：直接给Axios配置baseURL：

    axios.defaults.baseURL = 'http://localhost:3001';
    

• 检查路由路径大小写与导出：

  • Express路由区分大小写，确保前后端路径完全一致（比如都是小写/getprojectRequests）；
  • 后端路由文件末尾需导出Router：module.exports = router;，否则主应用无法识别。

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