Cors Origin Error. Works on local but not when I deploy on heroku

Question

I am using the code below to run my nodejs backend server. Angular front end has to communicate with the server. While I am using it on localhost everything works fine. However when I deploy my code on heroku I keep getting Access to XMLHttpRequest at 'heroku app link' from origin 'https:https://iprocopiou.com/.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Does anyone know what I am missing here?

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

const corsOptions = {
origin: "*",
methods: ["GET","HEAD","PUT","PATCH","POST","DELETE"],
credentials: true,
preflightContinue:false
}

require("./startup/logging")();
require("./startup/routes")(app);
require("./startup/db")();
require("./startup/config")();
require("./startup/validation")();
require("./startup/prod")(app);

app.use(cors(corsOptions))
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

const port = process.env.PORT || 3000;
app.listen(port, () =\> console.log(`Listening on port ${port}`));

I have tried almost every solution that I found...

Answer 1

For security reasons you need to specify the exact URL or URLS origin (protocol + domain + port) when you want to allow and share credentials, you cannot use *.

 const corsOptions = {
    origin: "https://iprocopiou.com",  // or your exact URL you allow to make request
    methods: ["GET","HEAD","PUT","PATCH","POST","DELETE"],
    credentials: true,
    preflightContinue:false
 }

//...
app.use(cors(corsOptions))

you can also see more detail in this threat CORS: Cannot use wildcard in Access-Control-Allow-Origin when credentials flag is true