React调用MongoDB后端API出现404错误求助

问题概述 #

React应用调用后端MongoDB的/api/jobs接口时收到404 Not Found错误，但Postman测试该接口可正常返回数据，后端路由已配置完成。

相关代码 #

App.js（前端）

useEffect(() => {
  async function fetchJobs() {
    try {
      const response = await axios.get('/api/jobs');
      setJobs(response.data);
    } catch (error) {
      console.error('Error fetching jobs:', error);
    }
  }
  fetchJobs();
}, []);

index.js（后端）

const jobRoutes = require('./routes/jobRoutes');
const express = require('express')
const cors = require('cors');
const mongoose = require('mongoose')

const app = express()
app.use(cors())

const PORT = process.env.PORT || 8080

mongoose.connect("mongodb://localhost:27017/joblistingDB",{ useNewUrlParser: true, useUnifiedTopology: true })
.then(() => {
    console.log("connected to db")
    app.listen(PORT,()=>{
        console.log("listening");
    })
})
.catch((err)=> console.log(err))

//Middleware
app.use(express.json());

// Routes
app.use('/api', jobRoutes);

jobRoutes.js（后端）

const express = require('express');
const router = express.Router();
const jobController = require('../Controllers/jobController');
const Job = require('../models/job');

// Define routes for job listings
// router.get('/jobs', jobController.getAllJobs);

Route to get all jobs
router.get('/jobs', async (req, res) => {
    try {
      const jobs = await Job.find();
      console.log("Fetched in backend successfully");
      res.json(jobs);
    } catch (error) {   
      res.status(500).json({ message: error.message });
    }
  });

解决建议 #

1. 修复后端路由文件的语法错误 #

jobRoutes.js中存在未注释的普通文本Route to get all jobs，这会导致Node.js解析路由模块失败，直接造成/api/jobs接口不存在。将该行改为注释：

// Route to get all jobs

修改后重启后端服务，再测试前端请求。

2. 确保前端请求地址正确 #

React开发环境默认会把相对路径/api/jobs指向前端服务端口（通常是3000），而非后端的8080端口。解决方式二选一：

• 直接使用完整URL请求：修改App.js中的请求地址

  const response = await axios.get('http://localhost:8080/api/jobs');
  

• 配置代理转发：在React项目的package.json中添加代理配置，重启前端服务后相对路径会自动转发到后端

  "proxy": "http://localhost:8080"
  

3. 确认后端路由加载顺序 #

确保后端路由在服务器启动前已正确挂载：当前后端代码中app.use('/api', jobRoutes)在app.listen之前执行，这部分是正确的，但如果修改过代码结构，需保证路由中间件在express.json()等必要中间件之后、app.listen()之前加载。

4. 验证CORS配置有效性 #

虽然已启用app.use(cors())，但可检查是否存在特定Origin限制，或是否在路由之后才加载CORS中间件（当前代码中CORS中间件在最前面，无需调整）。若前端部署在不同域名，可明确指定允许的Origin：

app.use(cors({ origin: "http://localhost:3000" }));

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