I don't know why but I got confused regarding Nodejs one behaviour.

Following is my nodejs code my server is running at port:8080

const express = require("express");
const app = express();
const multer = require("multer");
const cors = require('cors');
app.use(cors({
    origin:"http://localhost:4000"
}))
app.get("/userinfo", async (req, res) => {
    console.log("reached heree");
  res.json({
    message: "access",
  });
});
app.listen(
  8080,
  (error) => {
    if (error) {
      console.log("error");
    }
  },
  () => {
    console.log("listening at port 8080");
  }
);

And I am trying to hit API from a different origin [localhost:3000]

import logo from './logo.svg';
import './App.css';
import axios from "axios";
function App() {
  const makeRequest =()=>{
     axios.get("http://localhost:8080/userinfo").then(response=>{
       console.log(response);
     }).catch((e)=>{
       console.log(e);
     })
  }
  return (
    <div className="App">
      <button onClick={makeRequest}>Click</button>
    </div>
  );
}

export default App;

But when I click Click when I inspect the code, I got an error message as expected You are blocked by CORS policy.But when I see in terminal on my server-side, I see output Reached here. At this point, I got too confused and frustrated at the same time. How cross-site request triggered /userinfo from the different origin?. I don't think this should happen. How can I solve this issue??