No 'Access-Control-Allow-Origin' header is present on the requested resource error even though origin is allowed access

// redux saga client
  var token = "mytokenasjdfkjsadlkfjsadlkfjslakdjf";

  axios.get(`http://mydomain.com/api}`, 
  { 
    headers: {
    'Authorization' : `Bearer ${token}`,
    'Content-Type' : 'application/x-www-form-urlencoded'
  }, 
    withCredentials: true,
    credentials: 'same-origin'
  })
  .then(function (response) {
    console.log(response);
    return response
  })
  .catch(function (error) {
    console.log(error);
  });

// expressjs server

router.get('/react/listings28', parserTrue, (req, res)=>{

 res.setHeader('Access-Control-Expose-Headers', 'Access-Control-*, Origin, X-Requested-With, Content-Type, Accept, Authorization');
 res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3333');
 res.setHeader('Access-Control-Allow-Methods', 'HEAD, GET, POST, OPTIONS, PUT, PATCH, DELETE');
 res.setHeader('Access-Control-Allow-Headers', 'Access-Control-*, Origin, X-Requested-With, Content-Type, Accept, Authorization');
  res.setHeader('Access-Control-Allow-Credentials', true);
  
  
  console.log(`req headers below`);
  console.log(req.headers);
})

I get this error:

No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:3333’ is therefore not allowed access

The request doesn’t pass a preflight call i.e. I get No Access Control Origin error on the client side and Options request on the server. But as soon as I remove Authorization header everything works fine and I get nice headers as below on my server: (behaves the same in Chrome and Firefox)

{ host: ‘mydomain.com’, connection: ‘keep-alive’, accept: ‘application/json, text/plain, /’, origin: ‘http://localhost:3333’, ‘user-agent’: ‘Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.108 Safari/537.36’, referer: ‘http://localhost:3333/’, ‘accept-encoding’: ‘gzip, deflate’, ‘accept-language’: ‘en-US,en;q=0.9’, cookie: ‘session=eyJwG9ydCI6eyJ1c2VyIjoiZWRpa0BnbWFpbC5jb20ifX0=; session.sig=Awyv2-qONXwwB1ysgsKMErUDzzU’, ‘if-none-match’: ‘W/“773-ZwUbaGgfuGjMKTmc/XZpCzOUKJk”’ }

I understand the browser will make a preflight check if the Authorization header is present because it is not safelisted but everything is allowed on the server, don’t understand why it doesn’t work. Changing “mode” setting doesn’t make any difference

[dantenovski]

@karuppasamy Thanks! It didn’t work but it made me think that the server configuration may be the problem. I’m using cors module and it works like a charm

const cors = require('cors');

//app.use(cors());

app.use(cors({
  origin: 'http://localhost:3333',
  credentials: true
}));

[karuppasamy]

Did you try the headers in the app/router level middleware like below?. Express middleware router

router.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "http://localhost:3333");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});