Express.js CORS configuration, PUT does not work?

Question

I have a React application and Nodejs(Express) in the Backend. After deploying to the host server, The function I did for updating some documents stop working properly. It gives the CORS error:

I have this line of code to handle CORS policy in my server.js:

app.use((req, res, next) => {
  res.set({"Access-Control-Allow-Origin" : "*", 
           "Access-Control-Allow-Methods" : "HEAD, OPTIONS, GET, POST, PUT, PATCH, DELETE", 
           "Access-Control-Allow-Headers" : "Content-Type, Authorization, X-Requested-With"})
  next();
});

It is ok for GET and POST methods but does not work for PUT (Don't know if Delete works haven't tried)

I am on this issue for plenty of time; tried this: https://stackoverflow.com/a/42463858/11896129

looked for a bunch of solutions on the net, tried to configure it from IIS web.config file, nothing resolve my problem. Which part may I miss?

Answer 1

As stated on MDN:

Additionally, for HTTP request methods that can cause side-effects on server's data (in particular, for HTTP methods other than GET, or for POST usage with certain MIME types), the specification mandates that browsers "preflight" the request, soliciting supported methods from the server with an HTTP OPTIONS request method, and then, upon "approval" from the server, sending the actual request with the actual HTTP request method.

So you do have to answer preflight requests:

  app.options("*", (req, res) => {
    res.status(200).send("Preflight request allowed");
  });

Read more about preflight requests here.

Answer 2

This should work, I used this CORS configuration

  app.use(function(req,res,next){
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Methods", "GET, PUT, POST, DELETE, PATCH");
    res.header("Access-Control-Allow-Headers", "Accept, Content-Type, Authorization, X-Requested-With");

    next();
  });

Answer 3

Most likely the error No 'Access-Control-Allow-Origin' header is present that you see is coming from the preflight OPTIONS request, which is most likely not even reaching your express backend but is being hanlded by webserver in the front.

Either arrange for OPTIONS requests also to be relayed to your express backend in your webserver configuration or instruct the webserver to respond to it with required headers.

Check these:

https://support.plesk.com/hc/en-us/articles/115001338265-How-to-set-up-CORS-cross-origin-resource-sharing-in-Plesk-for-Linux-

https://support.plesk.com/hc/en-us/articles/360005431913-Is-it-possible-to-enable-CORS-cross-origin-resource-sharing-on-Plesk-for-Windows

https://talk.plesk.com/threads/iis-cors-configuration-problem-for-node-js-backend.355677/

Answer 4

You can use npm package cors (https://www.npmjs.com/package/cors) in your project. Install it and then configure it as a middleware. And put it before your application routes.

 const cors = require("cors");

    const corsOptions = {   origin: "*",   methods:
    "GET,HEAD,PUT,PATCH,POST,DELETE",   allowedHeaders:
        "Access-Control-Allow-Headers,Access-Control-Allow-Origin,Access-Control-Request-Method,Access-Control-Request-Headers,Origin,Cache-Control,Content-Type,X-Token,X-Refresh-Token",   credentials: true,   preflightContinue: false,  
    optionsSuccessStatus: 204 };

    app.use(cors(corsOptions));

Answer 5

Please try with below configuration

const cors = require('cors');
app.use(cors())

Please let me know if works for you or not.

See the Github repo for more info: https://github.com/expressjs/cors

Answer 6

We can use npm package to enable this too

npm install --save cors

After package is in place, use it as middleware as follows.

var express = require('express');
var cors = require('cors');
var app = express();
app.use(cors());

If you have requirement to confine your resource access to single application, that can be done as following

app.use(cors({
  origin: 'http://yourapp.com'
}));

If you have requirement to add access to multiple applications, that can be done as follows

var allowedOrigins = ['http://localhost:3000',
                      'http://yourapp.com'];
app.use(cors({
  origin: function(origin, callback){
    // allow requests with no origin 
    // (like mobile apps or curl requests)
    if(!origin) return callback(null, true);
    if(allowedOrigins.indexOf(origin) === -1){
      var msg = 'The CORS policy for this site does not ' +
                'allow access from the specified Origin.';
      return callback(new Error(msg), false);
    }
    return callback(null, true);
  }
}));

Answer 7

Did you write middleware that attaches header before the line of code that handles PUT request? I have a similar code but it worked for me. Another approach is to use npm 'cors' module.

For testing purpose, you can attach below test (you can attach the specific headers/methods later):

res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', '*');
res.header('Access-Control-Allow-Methods', '*');