Getting express server to accept CORS request

Question

I have my express server running on http://localhost:3000 (I call this web-server) I have another application running on localhost:8100 (I call this simply 'app')

When my app makes a call to the webserver I receive the message:

"XMLHTTPReqeust cannot load http://localhost:3000/auth/facebook. Response to preflight request doesn't pass access control check. A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin' when the credentials flag is true. Origin 'http://localhost:81000' is therefore not allowed acecss"

This message shows up in the browser console.

I have setup the following options in the middleware of my node webserver

res.header('Access-Control-Allow-Origin', '*'); res.header('Access-Control-Allow-Methods', 'GET,PUT, POST,DELETE');

After reading few stackoverfow questions, I also added the following:

 res.header('Access-Control-Allow-Origin', 'http://localhost:8100');

however this does not resolve the issue.

You also need to allow OPTIONS method in Access-Control-Allow-Methods — Vsevolod Goloviznin
– Vsevolod Goloviznin, Commented Nov 2, 2015 at 17:47

juan david restrepo villada · Accepted Answer · 2017-02-03 14:40:11Z

33

I use cors and implement it so, it's very simple

var cors=require('cors');

app.use(cors({origin:true,credentials: true}));

answered Feb 3, 2017 at 14:40

juan david restrepo villada

3313 silver badges4 bronze badges

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

2 Comments

Kevz Over a year ago

This for me worked. Plain and simple. You just got to "npm install cors" for it to work.

Richard Aguirre Over a year ago

This is the best Solution for Accept all origins because origin:"*" don't work

Vsevolod Goloviznin · Accepted Answer · 2015-11-02 18:08:47Z

You also need to allow OPTIONS method in the header.

I have this middleware for cors:

module.exports = function (req, res, next) { // CORS headers res.header("Access-Control-Allow-Origin", "YOUR_URL"); // restrict it to the required domain res.header("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE,OPTIONS"); // Set custom headers for CORS res.header("Access-Control-Allow-Headers", "Content-type,Accept,X-Custom-Header"); if (req.method === "OPTIONS") { return res.status(200).end(); } return next(); };

PS. The error you get is due to the fact of how cross-origin request works. To make a long story short, the browser might first send a pre-flight request with method OPTIONS to get allowed origins, headers and methods. So for this request you should return nothing but the Access-Control-* headers. If the pre-flight went fine, the browser will continue with the original request.

You can find more information here.

Thank you! if (req.method === "OPTIONS") was what was missing for me
Handling the OPTIONS method by sending the 200 status code helped. Also, look at this diagram for more understanding. The part where we need to handle OPTIONS is at the end of the diagram. html5rocks.com/static/images/cors_server_flowchart.png
Additional Resources to this thread 1. expressjs.com/en/resources/middleware/… Adding to @Felippe Regazio answers.

Thomas Bormans · Accepted Answer · 2015-11-02 17:48:43Z

I personally prefer the cors module. The code is really simple:

var whitelist = [ 'http://0.0.0.0:3000', ]; var corsOptions = { origin: function(origin, callback){ var originIsWhitelisted = whitelist.indexOf(origin) !== -1; callback(null, originIsWhitelisted); }, credentials: true }; app.use(cors(corsOptions));

I would recommend to use cors module as Thomas suggested, rather then deal with headers stuff. It is easy to setup and use. It tu 30 seconds to solve general issues.

runtimeZero · Accepted Answer · 2015-11-03 02:42:29Z

Apparently cors module didn't work.

Using the hints given above I used the following code:

 if (req.method === "OPTIONS") { res.header('Access-Control-Allow-Origin', req.headers.origin); } else { res.header('Access-Control-Allow-Origin', '*'); }

This did the trick.

isherwood · Accepted Answer · 2020-07-23 15:15:53Z

8

I had the same problem and stumbled for about an hour. The solution was actually simple--just enable CORS for preflight operations.

app.options('*', cors()); // include before other routes

edited Jul 23, 2020 at 15:15

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

answered May 1, 2016 at 7:05

Louie Almeda

5,67035 silver badges41 bronze badges

2 Comments

vish213 Over a year ago

combined with runtimeZero if-else code, this worked perfectly for me! More details here

Ivan Rubinson Over a year ago

The fact that the handling of CORS needs to be included before other routes helped a lot.

Craig Wayne · Accepted Answer · 2022-06-30 19:48:42Z

You must take in consideration your preflight request also. I suggest you to add the "cors" npm package on your project, and start it with this following configurations:

const cors = require('cors'); app.use(cors({ credentials: true, preflightContinue: true, methods: ['GET', 'POST', 'PUT', 'PATCH' , 'DELETE', 'OPTIONS'], origin: true }));

This will enable Cross Origin Requests for any address with the listed methods. The origin parameter is very flexible, you can delimiter a set of address, all address or by regex, for example. Here is the package docs:

https://expressjs.com/en/resources/middleware/cors.html

Thierry · Accepted Answer · 2018-10-26 11:33:11Z

I thought I'd had cracked this one before but once I swapped back from IIS to IIS Express, I started to get the error again!!

Started to Google once again and tried numerous suggestions, including the ones above but none of them worked until I found this article from Melvin's Web Stuff - Enable CORS IIS Express which suggested the following:

Add the following 2 lines to the <customHeaders> section under the <httpProtocol> section:

<add name="Access-Control-Allow-Origin" value="*" /> <add name="Access-Control-Allow-Headers" value="Content-Type" />

to the applicationhost.config located in:

%HOMEPATH%\Documents\IISExpress\config

The final result should look like this:

<httpProtocol> <customHeaders> <clear /> <add name="X-Powered-By" value="ASP.NET" /> <add name="Access-Control-Allow-Origin" value="*" /> <add name="Access-Control-Allow-Headers" value="Content-Type" /> </customHeaders> <redirectHeaders> <clear /> </redirectHeaders> </httpProtocol>

This worked nicely for me but note that I didn't need the above when running in IIS.

Collectives™ on Stack Overflow

Getting express server to accept CORS request

7 Answers 7

2 Comments

3 Comments

1 Comment

Comments

2 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

2 Comments

3 Comments

1 Comment

Comments

2 Comments

Comments

Comments

Linked

Related