Blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

1

I’ve been debugging this for several days, trying different deployment variations. My simple test full-stack app behaves as follows: 1) it works fine when the backend server runs locally + frontend runs locally, 2) it works fine when I run the backend locally with the frontend deployed on Netlify, 3) when the backend deployed on render, and the frontend either run locally on from Netlify I am getting CORS error: has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. The request is 200, but blocked by CORS.

I don’t know what else I could do at this point. I am using the cors package with some super basic configurations, yet this CORS error persists.

All env variables are triple-checked and properly added.

Below is my server.js file code:

const express = require("express");
const { initializeApp } = require("firebase/app");
const { getStorage, ref, getDownloadURL } = require("firebase/storage");
const cors = require("cors");
const dotenv = require("dotenv");

dotenv.config();

const app = express();

const allowedOrigins =
  process.env.NODE_ENV === "development"
    ? ["http://localhost:5173"]
    : [process.env.FRONTEND_URL];

app.use(
  cors({
    origin: (origin, callback) => {
      if (!origin || allowedOrigins.includes(origin)) {
        return callback(null, true);
      }

      callback(new Error("BE Error: Blocked by CORS policy"));
    },
  })
);

const firebaseConfig = {
  apiKey: process.env.FIREBASE_API_KEY,
  authDomain: process.env.FIREBASE_AUTH_DOMAIN,
  projectId: process.env.FIREBASE_PROJECT_ID,
  storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.FIREBASE_APP_ID,
};

const firebaseApp = initializeApp(firebaseConfig);
const storage = getStorage(firebaseApp);

app.get("/api/image-url", async (req, res) => {
  const { path } = req.query;
  if (!path) {
    return res.status(400).send("Path is required");
  }

  try {
    const storageRef = ref(storage, path);

    const downloadUrl = await getDownloadURL(storageRef);

    return res.json({ url: downloadUrl });
  } catch (error) {
    console.error("Error fetching image URL:", error);
    return res.status(500).send("Failed to fetch image URL");
  }
});

const port = process.env.PORT || 3000;

app.listen(port, () => {
  console.log(`Server running on port: ${port}`);
});

App overview: I am fetching images stored on Firebase, FE fetch request calling the backend, and the backend is calling the Firebase.

I hope someone can answer this, as it drives me nuts. Thank you!

4

Assuming code is correct, the primary reason that CORS blocks you from your own application is because the destination page, the page being consumed, is erroring. If it doesn’t output your application’s content, it also doesn’t have CORS headers. You need to determine whether the request to the destination page is functioning.