Allowing CORS in NodeJS

Question

I defined my Express js app:

const express = require('express') var history = require('connect-history-api-fallback'); const path = require('path') const http = require('http') const socketio = require('socket.io') require('./db/mongoose') const userRouter = require('./routers/user') const publicDirPath = path.join(__dirname, '../public') const app = express() app.use(express.static(publicDirPath)) app.use(history({ index: '../public/index.html' })) app.use(express.static(publicDirPath)) app.use(express.json()) app.use(userRouter) const server = http.createServer(app) const io = socketio(server) io.on('connection', socket => { console.log('New WebSocket connection') socket.on('join', () => { socket.emit('message', 'Welcome to the app') }) }) module.exports = server

Then I use it my index.js file:

const app = require('./app') const port = process.env.PORT app.listen(port, () => { console.log(`Server is up on port ${port}`) })

When I run the app and send requests from the same port - everything works just fine. But when I try to send requests from different localhost port, ie. 8080, I'm getting cross origin error. I tried to install cors package and use it as follows:

const cors = require('cors') app.options('*', cors()) app.use(cors());

And got the same result.

I tried to pass configuration to cors:

app.use(cors({ origin: 'http://localhost:8080' }));

And still got the same result.

What am I doing wrong and how can I make it work?

Have a look at expressjs.com/en/resources/middleware/cors.html, which shows how to use cors() (and is different from what you're showing you tried). — Mike 'Pomax' Kamermans
– Mike 'Pomax' Kamermans, Commented Jan 18, 2020 at 11:54
"But when I try to send requests from different localhost port" -> What exactly do you mean? Could you please confirm that you're not trying to reach a non-listening port? It looks like your app only listens on process.env.PORT, obviously no other ports would work. — fingeron
– fingeron, Commented Jan 18, 2020 at 11:56
@Mike'Pomax'Kamermans Yup, I saw it. I think it's basically the same, However I have to pass my Express app to http.createServer because of socket.io — Igal
– Igal, Commented Jan 18, 2020 at 12:03
@fingeron When I send an axios request from localhost:8080 (Vue app) to express server I'm getting this error: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:5555/users/login. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). localhost:5555 is where my express server runs. — Igal
– Igal, Commented Jan 18, 2020 at 12:05

fingeron · Accepted Answer · 2020-01-18 12:33:24Z

Let's take a minute to explain what "origin" is in simple words.

When a user browses to a website, he uses an address. Normally that address is a domain, but when we run our tests we mostly work with local IPs.

For CORS, this doesn't matter. Once you enable Allow-Origins, the server looks at the address the user used to reach the website, and defines it as the "origin" of the request.

Obviously, on a deeper level, everything comes down to IP addresses. But when it comes to CORS, it's more of a high-level security method. It's helps preventing Cross-Site Request-Forgeries for example.

In conclusion, in order for CORS to work, make sure you allowed the address which the user is using to access the HTTP service.

So, if you're serving a VUE app that's working on http://localhost:8080, and from it calling to an HTTP service on http://localhost:5555, you'll need to do this on the said HTTP service:

app.use(cors({ origin: 'http://localhost:8080' }));

Well, the 5555 port didn't work (since I'm requesting from 8080), but for some reason this time defining the origin with localhost:8080 did work. And I don't understand why it didn't work the first time (as you can see I pointed out in my question that I did try it).
@Igal Could be many things, from not saving your file before running to accidently putting the wrong environment value. Happy you got it to work! I'll update my answer to be more specific.
After adding Cors, It worked possibly due to server restart.

Palash Gupta · Accepted Answer · 2020-01-18 12:32:56Z

When your frontend app tries to make the request to the express server,

The express server is blocking that request because the source of the request (i.e. frontend server) is unknown to the express server

As the request that you are trying to make it out of the domain of the express server. this is the reason where you have to tell the server please accept the request from this origin a.k.a IP Address

and you can achieve the via cors

Collectives™ on Stack Overflow

Allowing CORS in NodeJS

2 Answers 2

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Related