Error 404 Not Found. Connecting my Nest.js with React via Axios

I’m using Nest.js on my backend and React on my front end.

It seems that I’m having a problem doing a Post request via Axios. Hence, I keep getting this 404 (Not found error).

Why am I still getting this 404 error?

// FrontEnd

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;

//backend

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
    ){

        //checks if user is existing
        const existingUser = await this.userRepo.findOneBy({id: createNapTimeDto.userId})
        if(!existingUser){
            throw new NotFoundException({
                status: "Error", 
                message: "UserID not found!"
            })
        }


        //checks if a babyId matches UserId
        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"
            })
        }
        // Save to naptime entity
        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

            }
        }
    }

}


import { Controller, Logger, Body, Query} from '@nestjs/common';
import { NapTimeService } from '../service/naptime.service';
import { Post, Get, Patch } from '@nestjs/common';
import { CreateNapTimeDto } from '../dto/createNaptime.dto';
import { UpdateNapTimeResponse } from '../dto/updateNapTimeResponse.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
        }
    }

}

Here are some of the things that I did:

• Added CORS code on my backend.

• Verified that the post request is working on the Postman.

• Verified that my frontend runs at port 3001 and backend at 3000.