Receiving 404 Error from Axios post request to MongoDB

Question

I am working on a MERN stack project for a proof-of-concept and am creating a wall where I can add posts from a form. The form accepts name, tags, title, and a message along with an image. Upon clicking submit, Axios gives me a 404 error in the console.

For example, trying to POST this data (using a mongoose schema):

{creator: 'asdfasddd', title: 'asdfasd', message: 'asdffdd', tags: 'dddd', selectedFile: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA0gA…AAAAAAAAAAAAAAAAAYI+9AisfoxArdwtiAAAAAElFTkSuQmCC'}

And I receive this error message:

{message: 'Request failed with status code 404', name: 'AxiosError', code: 
'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}

This is the AxiosError expanded only once, I can expand the error further if that would help, I've looked through it an found nothing in particular that seems helpful.

[ error message1

If somebody could tell me why I am getting this error besides the fact that I am timing out and what would cause me to that would be helpful. One note to help is that I receive some interaction to my DB just no data (of course). My POST functions are here if that helps as well, but I don't believe that is wrong either. If I need to post my the code to my component itself let me know.

import * as api from '../api';

// Action Creators
export const getPosts = () => async (dispatch) => {
    
    try {
        const { data } = await api.fetchPosts();
        dispatch( {type: 'FETCH_ALL', payload: data });
        
    } catch (error) {
        console.log(error.message);
    }
    
}

export const createPost = (post) => async (dispatch) => {
    try {
        const {data } = await api.createPost(post);
        dispatch({type: 'CREATE', payload: data});
        
    } catch (error) {
        console.log(post);
        console.log(error.toString());
        console.log(error);
    }
}

Code for POSTS for the back end in my controllers folder.

import PostMessage from '../models/postMessage.js';

export const getPosts = async (req, res) => {
    try {
        const postMessages = await PostMessage.find();

        console.log(postMessages);

        res.status(200).json(postMessages);
    } catch (error) {
        res.status(404).json({ message: error.message});
    }
}

export const createPost = async (req, res) => {
    const post = req.body;
    const newPost = new PostMessage(post);

    try {
        await newPost.save();

        res.status(201).json(newPost);
    } catch (error) {
        res.status(409).json({ message:error.message});
    }
}

Within api folder:

import axios from 'axios';


const url = 'http://localhost:5000/posts';
//const port = process.env.PORT;
//const url = 'http://localhost:3000/posts';

export const fetchPosts = () => axios.get(url);
export const createPost = (newPost) => axios.post(url, newPost);

How the data is routed server-side:

import express from 'express';
import { getPosts, createPost } from '../controllers/posts.js';

const router = express.Router();

//http://localhost:5000/posts
router.get('/', getPosts);
router.get('/', createPost);

export default router;

Your response.data probably provides the best detail, which is being cut off by your image. What's the full URL right after the word "settle"? — phatfingers, Nov 07 '22 at 22:00
the error suggests that the url `http://localhost:5000/posts` is not valid - is it? — Jaromanda X, Nov 07 '22 at 22:00
"AxiosError: Request failed with status code 404 at settle (http://localhost:3000/main.6b5bd725c4501c4d1695.hot-update.js:1603:12) at XMLHttpRequest.onloadend (http://localhost:3000/main.6b5bd725c4501c4d1695.hot-update.js:343:66)" — Zachery Uporsky, Nov 07 '22 at 22:29
Please include how `createPost` is routed within your app. Just showing the controller tells us nothing — Phil, Nov 07 '22 at 23:33
_`router.get('/', createPost)`_... shouldn't that be `router.post('/', createPost)`? — Phil, Nov 08 '22 at 04:33

score 1 · Accepted Answer · answered Nov 08 '22 at 03:24

1

In your router file, you are missing the POST method

router.post('/', createPost);

In your main file, it should be

app.use("/posts", postRouter)

answered Nov 08 '22 at 03:24

Shri Hari L

4,551
2
6
18

Receiving 404 Error from Axios post request to MongoDB

1 Answers1