I tried to fetch the Api I built and hosted online but it keeps returning the error below: Access to fetch at 'https://api.solomonleke.com.ng/user/signup' from origin 'http://localhost:3000' has been blocked by CORS policy: Cannot parse Access-Control-Allow-Headers response header field in preflight response.

this is the index.js code below:

dotenv.config();
const express = require("express");
const mongoose = require("mongoose");
const bodyParser = require("body-parser");
const http = require('http');
const cors = require("cors");
const morgan = require("morgan");

const userRouter = require("./Routes/userRoutes");

const app = express();

app.use(bodyParser.json());

mongoose.connect(process.env.DB_URI)
.then(() => {
    console.log(`DB connected`)
});

mongoose.connection.on("error", (err) => {
    console.log(`DB connection error: ${err.message}`)
});

app.use(morgan("dev"));
app.use('/uploads', express.static('uploads'));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

app.use(cors(
  {
    origin: true,
    credentials: true,
    exposedHeaders:["Content-Length", "X-Foo", "X-Bar"],
    methods: "GET,HEAD,PUT,PATCH,POST,DELETE",
    allowedHeaders: [{"Content-Type": "application/json"}],
    preflightContinue: true,
    optionsSuccessStatus: 200
  }
));

// Routes which should handle requests
app.use("/user",  userRouter);

app.use((req, res, next) => {
  const error = new Error("Not found");
  error.status = 404;
  next(error);
});

app.use((error, req, res, next) => {
  res.status(error.status || 500);
  res.json({
    error: {
      message: error.message
    }
  });
});```