React & Node.js fetch basic authorization

Question

I am using fetch api to make request from reactjs to node.js backend with Basic Authorization with the code below...

React

fetch(baseUrl, {
  method: 'get',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
    authorization: 'Basic ' + secret,
  },
}).then((res) => {
  if (res.ok) {
    return res.json();
  } else {
    return Promise.reject(res.statusText);
  }
})
  .then((resBody) => {
    //
  })
  .catch((error) => {
    console.error(error);
  });

Node.js

app.use((req, res, next) => {

  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');

  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');

  res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type, Authorization');

  res.setHeader('Access-Control-Allow-Credentials', true);

  return next();
});

app.use((req, res, next) => {

  const base64Credentials = (req.headers.authorization || '').split(' ')[1] || '';

  const [username, password] = Buffer.from(base64Credentials, 'base64').toString().split(':');

  const auth = { username: 'username', password: '123456' }
  console.log(username, password, auth.username, auth.password);
  // comment below
  if (username === auth.username && password === auth.password) {
    return next();
  } else {
    res.status(401).send('Authentication required.'); // custom message
  }

});

The following error is occur when I try to make the request.

Access to fetch at 'http://127.0.0.1:5000/' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

However, when I comment the comparison part in the second middleware if (username === auth.username && password === auth.password) it works fine. I have tried using Postman to send request it also no problem happen. The problem only occur when I make the request from react app. Anyone know what is the reason? Thanks a lot

do you use the CORD npm?

TalOrlanczyk
– TalOrlanczyk

2020-12-05 14:31:30 +00:00
Commented Dec 5, 2020 at 14:31 — TalOrlanczyk
– TalOrlanczyk, Commented Dec 5, 2020 at 14:31
I didn't use cors.

S.Chern
– S.Chern

2020-12-05 14:42:26 +00:00
Commented Dec 5, 2020 at 14:42 — S.Chern
– S.Chern, Commented Dec 5, 2020 at 14:42

Dharman · Accepted Answer · 2020-12-05 14:48:07Z

1

it seems that the CORS npm is no installed npm i cors and write this code:

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

more information about CORS npm

edited Dec 5, 2020 at 14:48

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Dec 5, 2020 at 14:42

TalOrlanczyk

1,2139 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React & Node.js fetch basic authorization

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related