Express JS: No 'Access-Control-Allow-Origin' header is present on the requested resource

Question

I have an API running on a server and a front-end client connecting to it to retrieve data. I did some research on the cross domain problem and has it working. However I've not sure what has changed. I am now getting this error in the console:

XMLHttpRequest cannot load https://api.mydomain/api/status. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://beta.mydomain.com' is therefore not allowed access. The response had HTTP status code 502.

I have the following route file:

var express = require('express');
var router = express.Router();
var Assessment = require('../app/models/assessment');

router.all('*', function (req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    next();
});


router.post('/api/status', function (req, res, next) {
    getStatus.getStatus(req, res, Assessment);
});

module.exports = router;

And the following JavaScript making an Ajax call to that route:

var user = {
    'uid' : '12345'
};
$.ajax({
    data: user,
    method: 'POST',
    url: 'https://api.mydomain/api/status',
    crossDomain: true,
    done: function () {
    },
    success: function (data) {
        console.log(JSON.stringify(data));
    },
    error: function (xhr, status) {

    }
});

I have tried: Putting the requesting domain in the 'Access-Control-Allow-Origin' header Using the cors module for express Putting my router.all function inside middleware

The requesting domain is HTTP and the api domain is on HTTPS. However, I have had it working while the HTTP was enabled.

Does anyone have any insight into why the 'Access-Control-Allow-Origin' header is not being send?

Thank you

Answer 1

Instead of setting the request headers to your express route, Can you try setting it to express instance itself like this,

var express = require('express');
var app = express();
var Assessment = require('../app/models/assessment');

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

app.post('/api/status', function (req, res, next) {
    // your code goes here
});

module.exports = app;

Hope this helps!

Answer 2

You can also use cors npm for the same.

**npm i cors**

const cors = require('cors')

var corsOptions = {
  origin: '*',
  optionsSuccessStatus: 200 // some legacy browsers (IE11, various SmartTVs) choke on 204 
}
app.use(cors(corsOptions));

var routes = require('./api/routes/route'); //importing route
routes(app); //register the route