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, Nov 02 '15 at 17:47

score 30 · Answer 1 · answered Feb 03 '17 at 14:40

30

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

var cors=require('cors');

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

answered Feb 03 '17 at 14:40

juan david restrepo villada

301
3
3

This for me worked. Plain and simple. You just got to "npm install cors" for it to work. – Kevz Oct 10 '19 at 07:59
This is the best Solution for Accept all origins because origin:"*" don't work – Richard Aguirre Nov 20 '19 at 15:08

score 23 · Answer 2 · answered Nov 02 '15 at 17:48

23

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));

answered Nov 02 '15 at 17:48

Thomas Bormans

5,156
6
34
51

4

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. – user5026837 Jan 29 '16 at 08:28

Vsevolod Goloviznin · Answer 3 · 2015-11-02T18:08:47.017

23

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.

edited Nov 02 '15 at 18:08

answered Nov 02 '15 at 17:48

Vsevolod Goloviznin

12,074
1
49
50

5

Thank you! `if (req.method === "OPTIONS")` was what was missing for me – Tom Sep 01 '19 at 08:42
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. https://www.html5rocks.com/static/images/cors_server_flowchart.png – iheathers Mar 12 '22 at 13:16
Additional Resources to this thread 1. https://expressjs.com/en/resources/middleware/cors.html#enabling-cors-pre-flight Adding to @Felippe Regazio answers. – iheathers Mar 12 '22 at 13:21

score 11 · Answer 4 · answered Nov 03 '15 at 02:42

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.

score 8 · Answer 5 · edited Jul 23 '20 at 15:15

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 '20 at 15:15

isherwood

58,414
16
114
157

answered May 01 '16 at 07:05

Louie Almeda

5,366
30
38

1

combined with runtimeZero if-else code, this worked perfectly for me! More details [here](https://github.com/expressjs/cors#enabling-cors-pre-flight) – vish213 Aug 18 '17 at 06:11
1

The fact that the handling of CORS needs to be included before other routes helped a lot. – Ivan Rubinson Dec 03 '17 at 15:28

score 1 · Answer 6 · edited Jun 30 '22 at 19:48

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

score 0 · Answer 7 · answered Oct 26 '18 at 11:33

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.

Getting express server to accept CORS request

7 Answers7

Linked