MERN application in Heroku not able to connect to backend

I have created a full stack MERN application and I am trying to deploy it on Heroku. But I can't seem to get the frontend to connect to the backend. I try to do a simple post request to my backend using axios:

axios.post("/api/items", { item }).then((res) => {
      if (res.status === 200) {
        this.setState({ sended: true });
      }
    });

With this I am also using a proxy from http-proxy-middleware in the setupPorxy.js:

const proxy = require('http-proxy-middleware')

module.exports = function(app) {
    app.use(proxy(['/api' ], { target: 'http://localhost:5000' }));
}

On my server side I have CORS enabled. I have also tried to change http://localhost:3000 to https://merninschrijvingen.herokuapp.com:

app.use(function (req, res, next) {
  res.setHeader("Access-Control-Allow-Origin", "http://localhost:3000");
  res.setHeader(
    "Access-Control-Allow-Methods",
    "GET, POST, OPTIONS, PUT, PATCH, DELETE"
  );
  res.setHeader(
    "Access-Control-Allow-Headers",
    "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With"
  );
  next();
});

I have also defined my client location:

app.use("/api/items", items);

const port = process.env.PORT || 5000;

if (process.env.NODE_ENV === "production") {
  app.use(express.static("client/build"));

  app.get("*", (req, res) => {
    res.sendFile(path.resolve(__dirname, "client", "build", "index.html"));
  });
}

app.listen(port, () => console.log("Server starter on port " + port));

This is my axios instance with the BaseUrl:

import axios from "axios";

const instance = axios.create({
  baseURL: process.env.baseURL || "http://localhost:5000/",
});

export default instance;

These are the examples of the requests I am sending from the frontend in Heroku:

This is the complete server.js file:

const express = require("express");
const mongoose = require("mongoose");
const bodyParser = require("body-parser");
const path = require("path");
const cors = require("cors");

const items = require("./routes/api/items");

const app = express();

//Bodyparser Middleware
app.use(bodyParser.json());

app.enable("trust proxy");
app.use(cors());

app.use(function (req, res, next) {
  res.setHeader(
    "Access-Control-Allow-Origin",
    "https://merninschrijvingen.herokuapp.com"
  );
  res.setHeader(
    "Access-Control-Allow-Methods",
    "GET, POST, OPTIONS, PUT, PATCH, DELETE"
  );
  res.setHeader(
    "Access-Control-Allow-Headers",
    "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With"
  );
  next();
});

//DB Config
const db = require("./config/keys").mongoURI;

//Connect to Mongo
mongoose
  .connect(process.env.MONGODB_URI || db, {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  })
  .then(() => console.log("MongoDB Connected"))
  .catch((error) => console.log(error));

//Use Routes
app.use("/api/items", items);

const port = process.env.PORT || 5000;

if (process.env.NODE_ENV === "production") {
  app.use(express.static("client/build"));

  app.get("*", (req, res) => {
    res.sendFile(path.resolve(__dirname, "client", "build", "index.html"));
  });
}

app.listen(port, () => console.log("Server starter on port " + port));