reactjsnode.jsexpresscorsmern

React axios request to node express app gets blocked by cors


I get this error when trying to make a request from react to my node server, even though I enabled cors so I dont understand why.

Error Message in the console: React error message

Error message in the network tab:

enter image description here

react axios request:

try {
  const url = "http://192.168.178.112:8080/api/users";
  const { data: res } = await axios.post(url, data);
  navigate("/login");
  console.log(res.message);
} catch (error) {
  if (
    error.response &&
    error.response.status >= 400 &&
    error.response.status <= 500
  )
    setError(error.response.data.message);
}

node js express:

require("dotenv").config();
const express = require("express");
const app = express();
const cors = require("cors");
const connection = require("./db");
const userRoutes = require("./routes/users");
const authRoutes = require("./routes/auth");

connection();

app.use(express.json());
app.use(cors());

app.use("/api/users", userRoutes);
app.use("/api/auth", authRoutes);

const port = process.env.PORT || 8080;
app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

Solution

  • it does not seem like CORS problem, if you take a closer look at the browser logs, you'll see it says net::ERR_DISCONNECTED_INTERNET,

    The net::ERR_DISCONNECTED_INTERNET error in JavaScript usually indicates that the browser has lost its connection to the internet. This error often occurs when trying to make network requests (e.g., using fetch, axios, or WebSocket) while the device is offline or there is a problem with the network.