I am having a problem with my browser by which it suddenly has this blocking of using the avatar images from https://avatar-placeholder.iran.liara.run/

Both my server and React frontend works fine in retrieving my data as as shown here:
enter image description here

import express from "express";
import dotenv from "dotenv";
import cookieParser from "cookie-parser";
import cors from "cors";

// Local Imports
import authRoutes from "./routes/auth.routes.js";
import messagesRoutes from "./routes/messages.routes.js";
import userRoutes from "./routes/user.routes.js";
import profileRoutes from "./routes/profileinfo.routes.js";
import connectToDb from "./db/connectMongo.js";
import { app, server } from "./socket/socket.js";

// Declared Variables
dotenv.config();
const PORT = process.env.PORT || 5000;


// MiddleWare
app.use(express.json()); // to parse the incoming requests with JSON payloads
app.use(cookieParser());
app.use(cors({origin:"http://localhost:5173"}));

// Routes
app.use("/api/auth", authRoutes);
app.use("/api/messages", messagesRoutes);
app.use("/api/users", userRoutes);
app.use("/api/profileinfo", profileRoutes);

server.listen(PORT, () => {
  connectToDb();
  console.log(`Listening on port ${PORT}`);
});

enter image description here

I tried adding cors on my server and configuring the fetch request in React to allow cross-origins at the headers of the GET request. Help me what to do on the browser because everything works fine in the past, and I checked my code, there is nothing wrong between the communication of frontend and backend. I think it’s probably on the browser.