部署在Render上的Node/Express应用遭遇CORS策略拦截求助

我已经针对这个问题调试多日，尝试了多种部署组合，我的简易全栈测试应用表现如下：

• 后端服务器本地运行+前端本地运行时，应用正常工作；
• 后端本地运行、前端部署在Netlify时，应用正常工作；
• 后端部署在Render后，无论前端是本地运行还是部署在Netlify，均出现CORS错误：请求被CORS策略拦截，请求资源上不存在‘Access-Control-Allow-Origin’头。请求状态码为200，但仍被CORS拦截。

我已使用cors包进行基础配置，但该CORS错误仍持续存在，所有环境变量均已反复核对并正确配置。

后端server.js代码 #

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}`);
});

业务逻辑说明 #

前端通过fetch请求调用后端接口，由后端请求Firebase Storage获取图片的下载URL并返回给前端。

前端React Vite相关代码 #

const baseUrl =
  import.meta.env.MODE === "development"
    ? "http://localhost:3000"
    : import.meta.env.VITE_BACKEND_URL;

const getImageUrl = async ({ path }: { path: string }) => {
  try {
    const response = await fetch(`${baseUrl}/api/image-url?path=${path}`);
    if (!response.ok) {
      throw new Error("Failed to fetch image URL");
    }
    const data = await response.json();

    return data.url;
  } catch (e) {
    console.log("Error fetching images FE: error is", e);
    throw new Error("Error fetching images FE");
  }
};

export { getImageUrl };

相关截图说明 #

• fetch请求头截图：展示了请求发起时携带的Origin、Referer等关键头部信息
• CORS错误提示截图：浏览器控制台明确显示“请求被CORS策略拦截，请求资源上不存在‘Access-Control-Allow-Origin’头”的错误信息
• 请求头详情截图：完整展示了请求的所有头部字段，以及响应头部中确实缺失Access-Control-Allow-Origin字段

内容的提问来源于stack exchange，提问作者Nick