Header field not allowed by Access-Control-Allow-Headers - Node/Express/KeystoneJs

Question

I have CORS issue and spend a lot of time trying to figure it out, so I decide to ask a question here. I have keystone app on a subdomain to the domain where is my angular 5 app. On localhost everything works ok but, but when I put my files to the server and try open my angular app I get this error:

Failed to load http://xxxxxxxx.com/label: Request header field params is not allowed by Access-Control-Allow-Headers in preflight response.

I have added this lines to my keystone.js file:

keystone.set('cors allow origin', true);
keystone.set('cors allow methods', true);
keystone.set('cors allow headers', true);

And this line in routes/index.js:

app.all('/*', keystone.middleware.cors);

And I tried add this to routes/index.js:

app.options('/*', function(req, res) {
        res.header("Access-Control-Allow-Credentials", "true");
        res.header('Access-Control-Allow-Methods', 'GET,POST');
        res.header("Access-Control-Allow-Origin", "*");
        res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
        res.sendStatus(200);
    });

But I still get the same error. Any suggestions how to fix that?

And everything is from same origin? Can you show the error you are getting, that would help identify the issue a bit more. — TGarrett, Jan 23 '18 at 12:23
No, everything isn't from the same origin. I have api (keystonejs) on subdomain to domain where is my angular app. I added error to my question. — MaSza, Jan 23 '18 at 12:27
Possible duplicate of [How does Access-Control-Allow-Origin header work?](https://stackoverflow.com/questions/10636611/how-does-access-control-allow-origin-header-work) — zero298, Jan 23 '18 at 12:36
No, that's not duplicate of thread you post, because my question is about baked in keystonejs cors module which doesn't work. — MaSza, Jan 23 '18 at 12:44

score 1 · Accepted Answer · answered Jan 23 '18 at 12:31

1

Install this package https://www.npmjs.com/package/cors and manage your CORS domains.

basic usage

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

app.use(cors())

answered Jan 23 '18 at 12:31

shamon shamsudeen

5,466
17
64
129

Yeah, that works fine! I don't understand why cors module backed in keystone doesn't work. Thank you for your answer! ;) – MaSza Jan 23 '18 at 12:45

score 0 · Answer 2 · answered Jan 23 '18 at 21:05

Well the error message says it all (admittdely not very clearly) - Request header field params is not allowed by Access-Control-Allow-Headers in preflight response. - this means that there is a request header called params which isn't included in the Access-Control-Allow-Headers (ACAH) response header.

Change the ACAH to be this:

    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, params");

and you should be fine.

Not that adding a separate package won't also solve the problem, but you don't need to add a new package to get this to work.

score 0 · Answer 3 · answered Apr 25 '18 at 01:59

I am also using Keystone.js and I am editing /routes/middleware.js by adding the below lines at the end of file:

/*
 * CORS
 */
exports.setCors = function (req,res,next) {
    res.header('Access-Control-Allow-Origin', '*.*');
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type');
}

Header field not allowed by Access-Control-Allow-Headers - Node/Express/KeystoneJs

3 Answers3