No 'Access-Control-Allow-Origin' header is present on the requested resource in Express app

Question

I have an Express app running on same server with my Web app. I'm trying to make a XMLHttpRequest to my Express app and I get this error:

Access to XMLHttpRequest at 'http://10.0.0.222:9999/' from origin 'http://10.0.0.222:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Though in my app this header is clearly 'present'. App code:

var cors = require('cors')
const util = require('util');
var inspect = require('eyes').inspector({maxLength: false})
const express = require('express');
var bodyParser = require('body-parser')
const app = express();

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

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

app.post('/', cors(corsOptions), function (req, res) {
        console.dir(req.body, {depth: null});
        res.send('a');
});

const PORT = process.env.PORT || 9999;
app.listen(PORT, () => {
  console.log(`Server listening on port ${PORT}...`);
});

XMLHttpRequest Code:

var xhr = new XMLHttpRequest();
xhr.open("POST", 'http://10.0.0.222:9999', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(goodJSON)

Why do I still get this error even though the origin option has my web app's host included?

Does this [help](https://stackoverflow.com/questions/18310394/no-access-control-allow-origin-node-apache-port-issue)? — Apoorva Chikara, Jun 03 '21 at 12:48
@ApoorvaChikara No, still getting same error. Tried setting Access-Control-Allow-Origin to my web app host and to '*' and both didn't make difference — J. Doe, Jun 03 '21 at 12:56
According to the error message, the header isn't present in the _preflight request_ (`OPTIONS`), not the main request (`POST`). That is because you added the middleware in an `app.post` call which reacts only on `POST` and not on `OPTIONS`. [This](https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request) should explain it. — CherryDT, Jun 03 '21 at 15:37

score 1 · Accepted Answer · answered Jun 03 '21 at 15:33

1

It won't work because you have placed the headers in the base route i.e /.

You must check the headers before resolving the route. In your case route is already resolved and then you are applying the cors headers.

Use this:

app.use('/', cors(corsOptions));      or     app.use(cors(corsOptions));

app.post('/', function (req, res) {
    console.dir(req.body, {depth: null});
    res.send('a');
});

Applying cors in app.use will add the headers. After that path will be resolved and it won't throw the error

answered Jun 03 '21 at 15:33

Abhishek Pankar

723
8
26

"It won't work because you have placed the headers in the base route i.e /." — That's the URL they are making the request to. – Quentin Jun 03 '21 at 15:39
Yes, I got that. Please edit the answer as you see fit as I'm not good in English – Abhishek Pankar Jun 03 '21 at 16:16

score 1 · Answer 2 · answered Jun 03 '21 at 15:42

The error message says:

Response to preflight request

The preflight is an OPTIONS request sent to ask permission to make the actual request.

Your handler only accepts POST requests, so the OPTIONS request doesn't have the required headers on it.

The documentation specifically covers preflight requests:

app.options('/', cors(corsOptions));

No 'Access-Control-Allow-Origin' header is present on the requested resource in Express app

2 Answers2