在传递基本身份验证凭据时出现 axios 上的身份验证错误

Question

I've handled my server side's basic auth with nodejs, Please refer the code below.

module.exports = basicAuth;
// require("dotenv").config({ path: "./.env" });
require("dotenv/config");

// async function basicAuth(req, res, next) {
function basicAuth(req, res, next) {
  // check for basic auth header
  if (
    !req.headers.authorization ||
    req.headers.authorization.indexOf("Basic ") === -1
  ) {
    return res.status(401).json({ message: "Missing Authorization Header" });
  }

  console.log(req.headers.authorization);
  // verify auth credentials
  const base64Credentials = req.headers.authorization.split(" ")[1];
  //   console.log(base64Credentials);
  const credentials = Buffer.from(base64Credentials, "base64").toString(
    "ascii"
  );
  const [username, password] = credentials.split(":");
  // const user = await userService.authenticate({ username, password });
  let user = 0;
  if (
    username == process.env.API_USERNAME &&
    password == process.env.API_PASSWORD
  ) {
    user = 1;
  }
  if (!user) {
    return res
      .status(401)
      .json({ message: "Invalid Authentication Credentials" });
  }

  next();
}

I've added app.use(cors()) in my app.js and I'm able to access all routes using basic authentication. I've written my front end application using react and I'm using axios to fetch the data using the routes that I created. Please note the same API's work when I try to access it without using basic auth. Below is the code for accessing data using axios.

try {
      require("dotenv").config();
      console.log(this.state.params);
      let urlparam = "http://localhost:5000/users/" + this.state.params;

      let result;
      result = await axios({
        url: "http://localhost:5000/users",
        method: "get",
        withCredentials: true,
        headers: {
          authorization: "Basic c2Fsb29uOnNhbG9vbg==",
        },
      });
    } catch (err) {
      console.log(err);
    }

Using the above code I get: The requested resource requires user authentication. on Edge browser and on Google chrome I get the error: Access to XMLHttpRequest at ' http://localhost:5000/users ' from origin ' http://localhost:3000 ' 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. and xhr.js:178 GET http://localhost:5000/users net::ERR_FAILED

Please bear in mind I've added and used the cors middleware for all routes and it was working previously. I even tried passing auth parameters separately like

auth:{username:"",password:""}

it still wont work

Answer 1

I had to include app.use(basicAuth) below app.use(cors()) in the app.js file.