Node JS Express Server - Cross Origin Request Blocked, even with all the correct headers

Question

Despite having the correct headers in my nodejs server:

app.get('/api', function(req, res){
    res.header('Access-Control-Allow-Origin'. '*');
    res.header('Access-Control-Allow-Methods', 'GET');
    res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');

    res.status(200).send({'a':'b'});
});

When I make requests in my firefox browser, I still get the error:

"Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://www.example.com/api/. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing)."

This is how I make the request on the client side:

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
    if(this.readyState === 4 && this.status === 200){
        console.log(this.response);
    }
};
xhr.open('GET', 'http://www.example.com/api', true);
xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
xhr.setRequestHeader('Access-Control-Allow-Methods', 'GET');
xhr.setRequestHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
xhr.send(null);

do you know that `Access-Control-Allow-Origin', '*'` is a server sided only ? why did you set it on your client ? — Abslen Char, May 26 '18 at 12:50
try to use https://github.com/expressjs/cors. i suspect that it is blocked on the EXPRESS level & does not reach your route handler — Theo, May 26 '18 at 12:51
You don't have to set any headers while making the xhr requests. And you have a typo in your express code. res.header('Access-Control-Allow-Origin'`,` '*'); — Brahma Dev, May 26 '18 at 17:00
Found my answer in here: https://stackoverflow.com/questions/20433655/no-access-control-allow-origin-header-is-present-on-the-requested-resource-or?rq=1 thank you — Ben Hagel, May 28 '18 at 17:38

score 1 · Answer 1 · answered Jun 06 '18 at 06:00

1

Dont set the "Access-Control-Allow-Origin" on client side,It should be added only on server-side.So,the server knows to accept request from all origins.

answered Jun 06 '18 at 06:00

Tharun208

103
7

score 0 · Answer 2 · answered Sep 11 '20 at 11:53

You can try cors module with express.

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

var corsOptions = {
  origin: 'http://example.com',
  optionsSuccessStatus: 200 // some legacy browsers (IE11, various SmartTVs) choke on 204
}

app.use(cors(corsOptions));

app.listen(80, function () {
  console.log('CORS-enabled web server listening on port 80')
})

If you want for specific domain.

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

var allowlist = ['http://example1.com', 'http://example2.com']
var corsOptionsDelegate = function (req, callback) {
  var corsOptions;
  if (allowlist.indexOf(req.header('Origin')) !== -1) {
    corsOptions = { origin: true }; // reflect (enable) the requested origin in the CORS response
  } else {
    corsOptions = { origin: false }; // disable CORS for this request
  }
  callback(null, corsOptions); // callback expects two parameters: error and options
}

app.get('/products/:id', cors(corsOptionsDelegate), function (req, res, next) {
  res.json({msg: 'This is CORS-enabled for an allowed domain.'});
});

app.listen(80, function () {
  console.log('CORS-enabled web server listening on port 80');
});

For more detailing click here

HTH

Node JS Express Server - Cross Origin Request Blocked, even with all the correct headers

2 Answers2