How to fix CORS error: request doesn't pass access control check?

Question

I have express.js server:

import express from 'express';
import cors from 'cors';
import bodyParser from 'body-parser';
import mongoose from 'mongoose';
import helmet from 'helmet';
import config from './config/config.js';
import authRoutes from './routes/auth.js';
import userRoutes from './routes/user.js';

mongoose.connect(config.mongoUri, { useNewUrlParser: true });
mongoose.connection.on('error', () => {
  throw new Error(`unable to connect to database: ${config.mongoUri}`);
});
const port = 9000;
const app = express();

app.use(helmet());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(cors());
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'POST,GET,LINK');
});
app.use('/', authRoutes);
app.use('/', userRoutes);
app.listen(port, () => console.log(`Example app listening on port ${port}!`));

Cors package install corectly in package.json. Here is my routes

import express from 'express';

import authCtrl from '../controllers/auth.controller.js';

const router = express.Router();

router.route('/auth/signin').post(authCtrl.signin);
router.route('/auth/signout').get(authCtrl.signout);

export default router;

When i trying to make request from Postman - all is working, but when try to do in from another server :

const signin = user => {
  console.log('user', user);
  return fetch('http://localhost:9000/auth/signin/', {
    method: 'POST',
    headers: {
      'Access-Control-Allow-Origin': '*',
      Accept: 'application/json',
    },
    credentials: 'include',
    body: JSON.stringify(user),
  })
    .then(response => {
      return response.json();
    })
    .catch(err => console.log(err));
};

It's error occur in the console

Access to fetch at 'http://localhost:9000/auth/signin/' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.

In network i can see OPTIONAL request : Access-Control-Allow-Headers: access-control-allow-origin Access-Control-Allow-Methods: GET,HEAD,PUT,PATCH,POST,DELETE Access-Control-Allow-Origin: *

So how can I fix this problem?

I think you should configure Cors and define the url you want to have access to. var corsOptions = { origin: 'http://example.com', optionsSuccessStatus: 200 } app.useCors(corsOptions ); — Morgana, Oct 14 '19 at 08:06

score 2 · Accepted Answer · answered Oct 14 '19 at 08:39

as you are using cors npm :

in your app js just add below and remove unnecessary code

import cors from 'cors';

app.use(cors());

and in your react project folder in package.json file :

"proxy": "http://localhost:9000",

so your api call will be :

const signin = user => {
  console.log('user', user);
  return fetch('/auth/signin', {
    method: 'POST',
    credentials: 'include',
    body: JSON.stringify(user),
  })
    .then(response => {
      return response.json();
    })
    .catch(err => console.log(err));
};

Thanks, it's help me! – Vlad Symonenko Oct 14 '19 at 09:59 — Vlad Symonenko, Oct 14 '19 at 09:59

score 0 · Answer 2 · answered Oct 14 '19 at 08:05

use cors configuration like this.

app.use(function (req, res, next) {
// Website you wish to allow to connect
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:9000');
// Request methods you wish to allow
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
// Request headers you wish to allow
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
// Set to true if you need the website to include cookies in the requests sent
// to the API (e.g. in case you use sessions)
res.setHeader('Access-Control-Allow-Credentials', true);
// Pass to next layer of middleware
next();

});

Still have this error ! – Vlad Symonenko Oct 14 '19 at 08:09 — Vlad Symonenko, Oct 14 '19 at 08:09
remove this default cors settings --> app.use(cors()); – Vipul Pandey Oct 14 '19 at 08:20 — Vipul Pandey, Oct 14 '19 at 08:20

score 0 · Answer 3 · answered Oct 14 '19 at 08:12

Use only one

app.use(cors());

Or

app.use(function (req, res, next) {
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:9000');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
res.setHeader('Access-Control-Allow-Credentials', true);
next();
})

score -1 · Answer 4 · answered Oct 14 '19 at 08:18

using Postman, so the CORS mechanism wasn’t involved. in second way and use browser for fetch data from url the request itself was successful, but the browser blocked it.

i think the other ways to bypass the CORS policy

One way to override the CORS policy is to install an extension such as Allow-Control-Allow-Origin: *. It Adds the Allow-Control-Allow-Origin: * header to the all the responses that your browser receives. As mentioned above, it disrupts the way that cookies are sent and received, so keep that in mind.

Another thing you can do is to specify in your request, that you want to bypass the CORS secure mechanism. You can do it if you use Fetch API by setting the mode parameter to no-cors:

fetch('http://localhost:9000', { mode: 'no-cors' });

This will work regardless of the Access-Control-Allow-Origin header. There is no equivalent of that in the XMLHttpRequest, unfortunately.

How to fix CORS error: request doesn't pass access control check?

4 Answers4

Linked