如何用React Axios调用Express+Mongoose构建的REST API？报错求助

错误原因分析 #

1. 请求路径错误：前端Axios使用相对路径发起请求，导致请求被发送到前端所在服务器（通常是3000端口），而非后端的8000端口。
2. 跨域问题：前后端端口不同，浏览器同源策略阻止跨域请求。
3. 后端路由语法错误：user.js中GET路由存在多余的闭合大括号，导致路由无法正常注册。

具体修复步骤 #

1. 修正前端Axios请求路径

将相对路径替换为后端服务器的完整地址，或者配置Axios全局baseURL：

方式一：直接使用完整地址

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

export default function User() {
    useEffect(()=>{
        const fetchPosts=async ()=>{
          // 替换为后端完整地址
          const res=await axios.get("http://localhost:8000/register/63cac1881a41912c72d734c6");
          console.log(res);
        };
        fetchPosts();
      },[])
    
  return (
    <div>
      <input type="text" placeholder='Enter your name....'/>
      <input type="text" placeholder='Enter your age....' />
    </div>
  )
}

方式二：配置Axios全局baseURL
在项目入口文件（如index.js或App.js）中添加配置：

import axios from 'axios';
axios.defaults.baseURL = 'http://localhost:8000';

之后组件中可简写请求路径：

const res=await axios.get("/register/63cac1881a41912c72d734c6");

2. 解决跨域问题

后端安装并启用CORS中间件：

• 安装依赖：

npm install cors

• 修改后端index.js：

const express =require( 'express');
const mongoose =require('mongoose');
const dotenv =require( "dotenv");
const cors = require('cors'); // 引入cors
const UserRoute=require("./routes/user");
const app=express();
dotenv.config();

app.use(cors()); // 启用cors，放在路由前

mongoose.connect(process.env.MONGO_URL,{useNewUrlParser: true},()=>{
    console.log("Database connected successfully!!")
});
app.use(express.json())
app.use("/register",UserRoute);

app.listen(8000,()=> console.log("Server connected!!!"));

3. 修复后端路由语法错误

删除user.js中GET路由多余的闭合大括号：

const User=require("../model/User");
const router= require( "express").Router();

router.post("/",async (req,res)=>{
    try{
        const newUser=new User({
            name: req.body.name,
            age:req.body.age
        });
        const user=await newUser.save();
        res.status(200).json("Account activated");
    }
    catch(err){
        res.status(400).json(err);
    }
    
});
router.get("/:id",async (req,res)=>{
    try{
        const user=await User.findById(req.params.id);
        res.status(200).json(user.name);
     }
     catch(err){
         res.status(500).json(err);
     }
)
module.exports =router;

内容的提问来源于stack exchange，提问作者Robert Downey Jr.