Cors Exception in Node.js

Question

I am having cors error in a Node.js application as follows:

Access to XMLHttpRequest at 'http://localhost:8081/api/tutorials/1' from origin 'http://localhost:2240' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header has a value 'http://localhost:8081' that is not equal to the supplied origin.
tutorial.component.js:91 Error: Network Error
    at createError (createError.js:16:1)
    at XMLHttpRequest.handleError (xhr.js:117:1)
xhr.js:210          PUT http://localhost:8081/api/tutorials/1 net::ERR_FAILED

The above are the messages from browser console. To avoid them, in the server-side with Express.js did the followings:

var corsOptions = {
  origin: "http://localhost:8081"
};

app.use(cors(corsOptions));

app.use(function(req, res, next) {
   //Website you wish to allow to connect
   res.setHeader('Access-Control-Allow-Origin', '*');

   //Request methods you wish to allow
   res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');

   //Request headers you wish to allow
   res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');

   //Pass to next layer of middleware
   next();
});

This actually occurs when I am trying to update an item in the database. So using axios, I am doing the following to do http request as follows:

import axios from "axios";
export default axios.create({
  baseURL: "http://localhost:8081/api",
  headers: {
    "Content-type": "application/json"
  }
});

But still couldn't sort this out. Any way to resolve it in the proper way?

You don't need to set the headers yourself if you are using the cors middleware. — Pádraig Galvin
– Pádraig Galvin, Commented Apr 2, 2022 at 18:00
Remove the second middleware (app.use block), you don't need it. — Pádraig Galvin
– Pádraig Galvin, Commented Apr 2, 2022 at 18:05
Just change corsOptions.origin to "localhost:2240". Your web app is served from this address, so this is the origin of the request you need to allow. — lifeisfoo
– lifeisfoo, Commented Apr 2, 2022 at 18:46

Pádraig Galvin · Accepted Answer · 2022-04-02 18:08:51Z

1

The CORS origin should be the domain of the site that is connecting to the server, not the server's address.

Change the port to 8080 or whatever port your site is running on:

var corsOptions = {
  origin: "http://localhost:8080"
};

This allows the browser to ensure that it only connects to the server from sites that are trusted.

answered Apr 2, 2022 at 18:08

Pádraig Galvin

1,1858 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user8512043 Over a year ago

Ok, now having this -

PUT http://localhost:8081/api/tutorials/1 500 (Internal Server Error) Error: Request failed with status code 500     at createError (createError.js:16:1)     at settle (settle.js:17:1)     at XMLHttpRequest.onloadend (xhr.js:66:1)

. In my case, origin is 2240 port.

Pádraig Galvin Over a year ago

Check the Node.js error logs, they should tell you what's wrong with the server.

Collectives™ on Stack Overflow

Cors Exception in Node.js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related