Search code examples
javascriptreactjsaxiosmernthunk

Receiving 404 Error from Axios post request to MongoDB

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;
Solution

  • In your router file, you are missing the POST method

    router.post('/', createPost);

    In your main file, it should be

    app.use("/posts", postRouter)