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

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/forgotPassword?email=example%40gmail.com' 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}`);
});

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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"
  }
}

Method 2

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')
})


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x