Axios POST with the server responded with a status of 500 (Internal Server Error)

Question

I'm using ReactJS to build a blog app. I can use axios get, put, delete but NOT POST. Every time I post a new blog, it gives me server responded with a status of 500 (Internal Server Error).

I have been struggle with this issue for a week and couldn't figure out the reason. Thank you very much for your help! Let me know if you need additional information.

Here are my codes:

API

import axios from 'axios'
const baseUrl = `/api/blogs`

let token = null

const setToken = newToken => {
  token = `bearer ${newToken}`
}

const getAll = () => {
  const request = axios.get(baseUrl)
  return request.then(response => response.data)
}

const create = async newBlog => {
  const config = {headers: { Authorization: token }}
  const response = await axios.post(baseUrl, newBlog, config)
  return response.data
}

const update = async (id, newObject) => {
  const request = axios.put(`${baseUrl}/${id}`, newObject)
  const response = await request
  return response.data
}

const remove= async (id) => {
  const config = {headers: { Authorization: token }}
  const request = axios.delete(`${baseUrl}/${id}`, config)
  const response = await request
  return response.data
}

const exportedObject = { getAll, create, update, setToken, remove }

export default exportedObject  

Frontend App.js

import React, { useState, useEffect, useRef } from 'react'
import blogService from './services/blogs'
import loginService from './services/login'
import Blog from './components/Blog'
import LoginForm from './components/LoginForm'
import BlogForm from './components/BlogForm'
import Togglable from './components/Togglable'
import Notification from './components/Notification'
import axios from 'axios'

const App = () => {
  const [blogs, setBlogs] = useState([])
  const [username, setUsername] = useState('') 
  const [password, setPassword] = useState('') 
  const [user, setUser] = useState(null)
  const [loginVisible, setLoginVisible] = useState(false)
  const [notificationText, setNotificationText] = useState("")
  const [notificationStyle, setNotificationStyle] = useState("notification")
  const [Toggle, setToggle] = useState(false)

  const BlogFormRef = useRef()

  useEffect(() => {
    const Data = async () => {
      const initialBlogs = await blogService.getAll()
      setBlogs( initialBlogs )
    }
    Data()
  }, [])

  useEffect(() => {
    const loggedUserJSON = window.localStorage.getItem('loggedBlogUser')
    if (loggedUserJSON) {
      const user = JSON.parse(loggedUserJSON)
      setUser(user)
      blogService.setToken(user.token)
    }
  }, [])

  const addBlog = async (blogObject) => {
    BlogFormRef.current.toggleVisibility()
    if (blogObject.title !== '' && blogObject.author !== '' && blogObject.url !== '') {
      const newBlog =  await blogService.create(blogObject)
      setBlogs(blogs.concat(newBlog))
      setNotificationStyle('notification')
      setNotificationText(`A new blog ${blogObject.title} by ${blogObject.author} is added`)
      setToggle(!Toggle)
      setTimeout(() => {
        setToggle(false)
      }, 5000)
      setBlogs('')
      console.log(blogObject)
      document.location.reload()
    } else {
      setNotificationStyle('Warning')
      setNotificationText('You must fill all fields to create a blog')
      setToggle(!Toggle)
      setTimeout(() => {
        setToggle(false)
      }, 5000)
  }
}

Backend

const blogsRouter = require('express').Router()
const Blog = require('../models/blog')
const User = require('../models/user')
const jwt = require('jsonwebtoken')
const middleware = require("../utils/middleware")

blogsRouter.get('/', async (request, response) => {

    const blogs = await Blog.find({}).populate('user', { username: 1, name: 1 })
        response.json(blogs)
    })

blogsRouter.get('/:id', (request, response) => {
      Blog.findById(request.params.id)
        .then(blog => {
          if (blog) {
            response.json(blog)
          } else {
                
                  response.status(404).end()
                } 
              })
          })
           
blogsRouter.post('/', middleware.userExtractor, async (request, response) => {
        const body = request.body
        const user = request.user
        const decodedToken = jwt.verify(request.token, process.env.SECRET)
        if (!decodedToken.id){
          return response.status(401).json({error: 'token missing or invalid'})
        }
          if(body.title === undefined){
            return response.status(400).send({
              error: 'title is missing'
            })
          }
          else if(body.author === undefined){
            return response.status(400).send({
              error: 'author is missing'
            })
          }
          else if(body.url === undefined){
            return response.status(400).send({
              error: 'url is missing'
            })
          }
          else{
            const blog = new Blog({
              title: body.title,
              author: body.author,
              url: body.url,
              likes: body.likes,
              user: user.id
            })
        const savedBlog = await blog.save()
        //console.log(savedBlog)
        //console.log(user)
        user.blogs = user.blogs.concat(savedBlog.id)
        await user.save()

       const populatedBlog = await savedBlog.populate('user', { username: 1, name: 1 }).execPopulate()

        response.status(200).json(populatedBlog.toJSON())
        }
      })

blogsRouter.delete('/:id', middleware.userExtractor, async (request, response) => {
        const blog = await Blog.findByIdAndRemove(request.params.id)
        const user = request.user
        const decodedToken = jwt.verify(request.token, process.env.SECRET)

        if(! request.token || !decodedToken.id){
          return response.status(401).json({error:'token is missing or invalid'})
        }
        else if(blog.user.toString() === user.id.toString()){
          await Blog.findByIdAndRemove(request.params.id)
          response.status(204).end()
        }
        else{
          return response.status(401).json({error:'cannot process deletion'})
        }
          
        })

blogsRouter.put('/:id', async (request, response) => {
          const body = request.body
          const blog = {
            title: body.title,
            author:body.author,
            url: body.url,
            likes: body.likes
          }
         await Blog.findByIdAndUpdate(request.params.id, blog, { new: true })
            .then(updatedBlog => {
              response.json(updatedBlog)
            })   
        })


module.exports = blogsRouter

Mongoose

const mongoose = require('mongoose')

const blogSchema = new mongoose.Schema({
  title: {type:String,
    required: true},
  author:{type:String,
    required: true},
  url: {type:String,
    required: true},
  likes: {type:Number,
    default: 0},
  user: {
      type: mongoose.Schema.Types.ObjectId,
      ref: 'User'}
})

blogSchema.set('toJSON', {
  transform: (document, returnedObject) => {
    returnedObject.id = returnedObject._id.toString()
    delete returnedObject._id
    delete returnedObject.__v
  }
})

const Blog = mongoose.model('Blog', blogSchema)
    
module.exports = Blog

Additional information: terminate output, the info is actually POST just cannot render in the front terminal output