Why CORS in node.js backend blocks post or get request from frontend?

Question

I'm running my Node.js backend server in a remote hosting server, and i'm running my react.js app frontend wrapped in capacitor.js for it to become a mobile app, however while testing my react.js frontend i'm unable to pass any post or get request to my backed server, since based from the console error states:

Access to XMLHttpRequest at 'http://178.62.195.108:4000/login' from origin 'http://localhost:3000' has been blocked by CORS policy: 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'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

followed by

Uncaught (in promise) AxiosError {message: 'Network Error', name: 'AxiosError', code: 'ERR_NETWORK', config: {…}, request: XMLHttpRequest, …}

this doesn't seem to make sense since i've allowed my backend server to 'Access-Control-Allow-Origin', '*' which supposed to allow any request from any origin but it doesn't based from the console error.

Sample react.js code snippet for login/signin process.

const Signin = () => {
    const [email, setUsername] = useState("");
    const [password, setPassword] = useState("");

    const navigate = useNavigate();
  
    const [loginStatus, setLoginStatus] = useState("");
  
    Axios.defaults.withCredentials = true;

    const header = {
      "Content-Type": "application/json",
      "Access-Control-Allow-Origin": "*",
    }

    const login = async ()=>{
        const response = await Axios.post("http://178.62.195.108:4000/login", {
          email: email,
          password: password,
        },header).then((response) => {
          if (response.data.message) {
            setLoginStatus(response.data.message);
          } else {
            sessionStorage.setItem("email",response.data[0].email);
            sessionStorage.setItem("firstname",response.data[0].firstname);
            sessionStorage.setItem("lastname",response.data[0].lastname);
            sessionStorage.setItem("acc",response.data[0].acctype);
            sessionStorage.setItem("farmname",response.data[0].farmname);
            navigate("/dashboard");
          }
        }); 
      };
    
      useEffect(() => {
        Axios.get("http://178.62.195.108:4000/login").then((response) => {
          if (response.data.loggedIn === true) {
            setLoginStatus(response.data.user[0].role);
          }
        });
      }, []);

    return (
    //more stuff here
    );
   };
   export default Signin;

and below is a sample server.js code snippet

import cors from "cors";

app.use(cors());

// ***CORS Middileware
const corHeaders = (req, res, next) => {
    res.setHeader('Access-Control-Allow-Origin', '*')
    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', false)
    next()
  }

app.post("/login", cors(), corHeaders, (req, res, next) => {
    //more stuff here
};

i'm really not familiar with CORS since all my previous projects only runs in the same hosting server i.e both backend and frontend are located in one place and that doesn't provide any complication since request origin is only coming from localhost and a fixed port, but this project hits different. Thank you.

Why CORS in node.js backend blocks post or get request from frontend?

0 Answers0