Axios POST to Heroku is blocked by CORS - Network Error: 503

I'm using MERN Stack and everything was working fine until I made some changes to the UI (Moving code to different components, changing styles,...).

• I didn't change any code in the Axios request and only this POST request doesn't work, the other requests work normally.

• I have already setup CORS in my backend

• I can access my-project.herokuapp.com/insert link and there's no error in the Heroku logs. No error thrown in the client or server terminal.

• When I click on the Add To List button in the form, the addToList function which contains the Axios POST request doesn't send the data to the database like it used to.

• After 30 seconds - this error appears:

Please help me understand what is going on and how to fix this. I have looked for other solutions but I don't know how to apply to my case. Thank you! :)

Here's my code:

addToList function on the client-side:

const [foodName, setFoodName] = useState('')
const [isVegetarian, setIsVegetarian] = useState('')
const [priceRange, setPriceRange] = useState('$')
const [foodUrl, setFoodUrl] = useState('')
const [foodList, setFoodList] = useState([])

const addToList = async (event) => {
      event.preventDefault()
      try {
        await Axios.post(
        "https://my-project.herokuapp.com/insert", 
        {
          foodName: foodName,
          isVegetarian: isVegetarian,
          priceRange: priceRange,
          foodUrl: foodUrl,
        }
        )
        .then(() => {
          setFoodName('')
          setIsVegetarian('')
          setPriceRange('$')
          setFoodUrl('')
        })
      } catch(err) {
        console.error(`The error is ${err}`)
      }
    }

Dinner.js - Mongoose Schema

const mongoose = require('mongoose')

const DinnerSchema = new mongoose.Schema({
    foodName: {
        type: String,
        required: true,
    },
    isVegetarian: {
        type: String,
        required: true,
    },
    priceRange: {
        type: String,
        required: true,
    },
    foodUrl: {
        type: String,
        required: true,
    }
})

const Dinner = mongoose.model("dinners", DinnerSchema)
module.exports = Dinner

Server's index.js and the endpoint that doesn't work:

const express = require("express")
const mongoose = require("mongoose")
const cors = require('cors')
const app = express()
require("dotenv").config()

const DinnerModel = require('./models/Dinner')

app.use(express.json())
app.use(cors())

// Connect to MongoDB
mongoose.connect(
    'mongodb+srv://linktoDB', 
    {
        useNewUrlParser: true,
    }
)

// Create:
app.post("/insert", async (req, res) => {
    const foodName = req.body.foodName
    const isVegetarian = req.body.isVegetarian
    const priceRange = req.body.priceRange
    const foodUrl = req.body.foodUrl

    const dinner = new DinnerModel(
        { 
            foodName: foodName, 
            isVegetarian: isVegetarian,
            priceRange: priceRange,
            foodUrl: foodUrl
        }
    )

    try {
        await dinner.save()
        res.send("Inserted successfully")
        
    } catch(err) {
        console.log(err)
    }
})

// Creating a port:
app.listen(process.env.PORT || 3001, () => {
    console.log("Server is connected.")
})

My backend's package.json:

{
  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "engines": {
    "node": "12.20.1"
  },
  "scripts": {
    "start": "node index.js",
    "devStart": "nodemon index.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "cors": "^2.8.5",
    "dotenv": "^10.0.0",
    "express": "^4.17.2",
    "mongoose": "^6.1.3",
    "nodemon": "^2.0.15",
    "validator": "^13.7.0"
  }
}

UPDATE 1

I added this code and it still doesn't work:

const corsOptions = {
 "origin": "*",
 "methods": "GET,HEAD,PUT,PATCH,POST,DELETE",
 "preflightContinue": false,
 "optionsSuccessStatus": 204,
}

 app.use(cors(corsOptions))

Here's the preflight request and response when I try to add the document. One with status 204 and one with status 503: https://i.stack.imgur.com/v1IcS.png https://i.stack.imgur.com/AzH8d.png

UPDATE 2