Https not working for cors, but http://localhost is-CodePudding

I am working on an express project using typescript and I needed to implement cors. I have added cors in normal express.js projects before without typescript and I thought it should work the same as I am not receiving any typescript warnings or errors. When I call the backend from the frontend using http://localhost:3000 the request works fine, but when I call the backend from https://FRONTEND_URL the request does not go through and I get this error:
Access to XMLHttpRequest at 'https://BACKEND_URL/member/auth/[email protected]' from origin 'https://FRONTEND_URL' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Is there another step for implementing https urls?

Code =>

import express from "express";
import mongoose from "mongoose";

import bodyParser from "body-parser";
import cors from "cors";
import * as dotenv from "dotenv";

import member from "./routes/member";

dotenv.config();

const app = express();
app.use(express.json({ limit: '50mb' }));
app.use(express.urlencoded({ limit: '50mb', extended: true }));

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

// Connect to the database
mongoose
.connect(process.env.MONGO_URI)
.then(() => console.log(`Database connected successfully`))
.catch((err) => console.log(err));

// Since mongoose's Promise is deprecated, we override it with Node's Promise
mongoose.Promise = global.Promise;

//use cors middleware
app.use(
  cors({
  origin: ["https://FRONTEND_URL", "http://localhost:3000"],
  credentials: true
}));

app.use(bodyParser.json());

app.get("/", (_req: any, res) => {
  res.send("Hello World!");
});

app.use("/member", member);

app.use((err: any, _req: any, _res: any, next: any) => {
  console.log(err);
  next();
});

app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

CodePudding user response：

You can try to whitelist using the ip directly, enable CORS for all websites by putting a wildcard *

or remove the middleware and use something like

app.get('/blabla',(req,res)=>{
res.set('Access-Control-Allow-Origin', 'https://WEBSITE');
res.json('hi')
})

CodePudding user response：

The problem was with my server! Since I am using typescript I had to set up my package.json a certain way to build to heroku; However, for development purposes I changed my serve function from "node dist/index.js" to "nodemon dist/index.js" and rebuilt the project. I am using firebase for some other auth like functions that are in the frontend and thought because of that my backend was working fine but it was crashed. Turns out this was not a cors issue at all.

// ./Package.json
{
"name": "server",
"version": "1.0.0",
"description": "",
"main": "dist/index.js",
"engines": {
  "node": "14.x"
},
"scripts": {
  "build-ts": "tsc",
  "postinstall": "npm run build-ts",
  "start": "npm run serve",
  "serve": "node dist/index.js",
  "watch-node": "nodemon dist/index.js",
  "watch-ts": "tsc -w"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
  "@types/connect-mongodb-session": "^2.4.2",
  "@types/cors": "^2.8.12",
  "@types/express": "^4.17.13",
  "@types/express-session": "^1.17.4",
  "@types/node": "^17.0.21",
  "nodemon": "^2.0.15",
  "typescript": "^4.6.2"
},
"dependencies": {
  "connect-mongodb-session": "^3.1.1",
  "cors": "^2.8.5",
  "dotenv": "^16.0.0",
  "express": "^4.17.3",
  "express-session": "^1.17.2",
  "firebase-admin": "^10.0.2",
  "mongoose": "^6.2.4"
  }
}