Frontend React App Can't Connect to Express MongoDB API on Render Deployment

Backend
1

I built a blog website using React frontend and Express backend with MongoDB. Everything works locally but after deploying both parts to Render, my frontend can’t get data from the backend API.

The Problem:
My React search component shows “Loading…” forever or displays “No results found” even though there’s data in the database. The weird thing is when I test the API directly in Postman or browser, it returns the correct JSON data.

What I Already Checked:

  • API endpoint works fine when accessed directly
  • CORS is configured properly for the frontend domain
  • Backend logs show no incoming requests from frontend
  • Tried both environment variables and hardcoded URLs
  • No error messages in browser console

Backend Code:

app.use(cors({
  origin: "https://my-blog-frontend.onrender.com"
}));

app.get("/articles", async (req, res) => {
  const articles = await Article.find();
  res.json({ data: articles });
});

Frontend Code:

const apiUrl = process.env.REACT_APP_API_URL || "https://my-blog-api.onrender.com";

fetch(`${apiUrl}/articles`)
  .then(response => response.json())
  .then(result => {
    setArticles(result.data);
    setIsLoading(false);
  })
  .catch(error => {
    console.log("Failed to fetch articles:", error);
    setIsLoading(false);
  });

My Questions:

  1. Does Render have issues with cross-subdomain requests between deployed apps?
  2. Should I add /api prefix to my routes?
  3. Could this be related to Render’s cold start delays?
  4. Any debugging tips for silent request failures?