Frontend cannot make requests to backend

Here’s the translation into English:

Question:

I am working on an admin dashboard using React and Axios, but the frontend is not sending any requests to the backend at all. Nothing is displayed in the console or the network tab.

Code:

import React, { useEffect, useState } from "react";
import axios from "axios";

const AdminDashboard = () => {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetchUsers();
  }, []);

  const fetchUsers = async () => {
    try {
      const response = await axios.get("/api/users");
      setUsers(response.data);
    } catch (error) {
      setError("ERROR");
    } finally {
      setLoading(false);
    }
  };

  if (loading) return <p>Loading users...</p>;
  if (error) return <p>{error}</p>;

  return <div>{/* ...Rendering Users... */}</div>;
};

export default AdminDashboard;

Backend:

// API route for users
app.get("/api/users", authenticateToken, (req, res) => {
  console.log("GOT API REQUEST: /api/users");
  db.query("SELECT id, first_name, last_name, email, is_active FROM users", (err, results) => {
    
    if (err) {
      console.error("Error retrieving users:", err);
      return res.status(500).json({ error: "Error retrieving users" });
    }

    console.log("Users retrieved successfully:", results);
    res.json(results); 
  });
});

Problem:

• No requests to /api/users are being sent, and nothing is visible in the console or network tab.
• The backend is running, and the URL is correct (http://localhost:3000/api/users).

I tried checking if Axios was imported correctly and verified that the backend was running. I expected that the frontend would successfully send a request to the backend and retrieve user data, which would then be displayed on the dashboard. However, no requests were sent at all, and I saw no errors or responses in the console or network tab.