Nest.js+React通过Axios发Post请求遇404 Not Found问题求助

我使用Nest.js作为后端框架，React作为前端框架，通过Axios发送POST请求时持续收到404（Not Found）错误，想请教问题原因。

已做排查 #

• 后端已配置CORS
• Postman中测试该POST请求可正常返回结果
• 确认前端运行在3001端口，后端运行在3000端口

前后端代码 #

前端代码 #

import React from "react";
import axios from "axios";

const AddSched: React.FC = () => {
    const handleClick = async () => {
        try{
            const createNapTimeDto = {
                userId: 5, 
                babyId: 5, 
                date: new Date().toISOString()
            }
        
            const response = await axios.post('http://localhost:3000/naptime/create', createNapTimeDto);
            console.log("Created object", response)
        }catch(error){
            console.error("There was an error", error)
        }
    };

    return (
        <div>
            <h2>Ready to log for Baby Axel</h2>
            <button onClick={handleClick}>Nap Time</button>
            <button onClick={handleClick}>Diaper Time</button>
            <button onClick={handleClick}>Tummy Time</button>
            <button onClick={handleClick}>Bath Time</button>
        </div>
    );
};

export default AddSched;

后端代码 #

NapTimeService

import { Injectable, NotFoundException } from '@nestjs/common';
import { InjectRepository } from '@nestjs/typeorm';
import { NapTimeEntity } from '../naptime.entity';
import { Repository } from 'typeorm';
import { UserEntity } from 'src/user/user.entity';
import { CreateNapTimeDto } from '../dto/createNaptime.dto';
import { BabyEntity } from 'src/baby/baby.entity';
import { GetOneResponseDto } from '../dto/getOneResponse.dto';

@Injectable()
export class NapTimeService {
    constructor(
        @InjectRepository(NapTimeEntity)
        private readonly napTimeRepo: Repository<NapTimeEntity>,

        @InjectRepository(UserEntity)
        private readonly userRepo : Repository<UserEntity>,

        @InjectRepository(BabyEntity)
        private readonly babyRepo : Repository<BabyEntity>
    ){}

    async create(
        createNapTimeDto: CreateNapTimeDto
    ){
        // 检查用户是否存在
        const existingUser = await this.userRepo.findOneBy({id: createNapTimeDto.userId})
        if(!existingUser){
            throw new NotFoundException({
                status: "Error", 
                message: "UserID not found!"
            })
        }

        // 检查babyId是否属于指定用户
        const matchedBaby = await this.babyRepo.findOne({
            where: {
                id: createNapTimeDto.babyId,
                user: existingUser
            }
        })

        if(!matchedBaby){
            throw new NotFoundException({
                status: "error",
                message: "baby does not belong to the specified user"
            })
        }
        // 保存到naptime实体
        const newNaptime = new NapTimeEntity;

        newNaptime.date = createNapTimeDto.date;
        newNaptime.babies = matchedBaby;
        newNaptime.user = existingUser; 
        await this.napTimeRepo.save(newNaptime)

        return{
            status: "OK",
            message: "New naptime created successfully", 
            data: {
                date: createNapTimeDto.date,
                babyId: createNapTimeDto.babyId,
                userId: createNapTimeDto.userId
            }
        }
    }
}

NapTimeController

import { Controller, Logger, Body} from '@nestjs/common';
import { NapTimeService } from '../service/naptime.service';
import { Post } from '@nestjs/common';
import { CreateNapTimeDto } from '../dto/createNaptime.dto';

@Controller('naptime')
export class NapTimeController {
    private readonly logger = new Logger(NapTimeController.name);
    constructor(private readonly napTimeService: NapTimeService){}

    @Post('/create')
    async createNapTime(
        @Body() createNapTimeDto: CreateNapTimeDto
    ){
        try{
            return this.napTimeService.create(createNapTimeDto)
        }catch(error){
            this.logger.error(NapTimeController.name, error);
            throw error
        }
    }
}

可能的问题及解决方法 #

1. 控制器未注册到对应模块
   Nest.js中控制器必须在模块的controllers数组中注册才能被识别。检查你的NapTimeModule（或对应功能模块）是否添加了NapTimeController：

   @Module({
     controllers: [NapTimeController],
     providers: [NapTimeService],
     // ...其他配置
   })
   export class NapTimeModule {}
   

2. 全局前缀导致路径不匹配
   如果后端设置了全局路由前缀（比如app.setGlobalPrefix('api')），前端请求路径需要加上前缀，即http://localhost:3000/api/naptime/create。

3. 请求路径大小写问题
   确认后端路由路径和前端请求路径的大小写完全一致（Nest.js路由默认区分大小写，除非配置了不区分）。

4. 后端服务端口或路由监听异常
   检查后端控制台日志，确认服务确实在3000端口启动，且启动时没有报错。可以尝试重启后端服务，确保路由正常加载。

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