部署在渲染器上的 Node/Express 应用程序被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头

Question

我已经对此进行了几天的调试，尝试不同的部署变体。我的简单测试全栈应用程序的行为如下：

1. 当后端服务器本地运行+前端本地运行时，它可以正常工作，
2. 当我在本地运行后端且前端部署在 Netlify 上时，它工作正常，
3. 当后端部署在渲染上，并且前端从 Netlify 本地运行时，我收到 CORS 错误：已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。如果不透明响应满足您的需求，请将请求模式设置为“no-cors”以在禁用 CORS 的情况下获取资源。请求是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}`);
});

我正在获取存储在 Firebase 上的图像，FE 获取请求调用后端，后端正在调用 Firebase。

获取请求头

错误表明cors问题

Answer 1

要修复部署在渲染上的 Node/Express 应用程序中的 CORS 问题：

1. 检查

   allowedOrigins

   ：确保

   process.env.FRONTEND_URL

   已正确设置用于生产（例如，

   https://your-netlify-site.netlify.app

   ）。

2. 添加预检处理：添加此项以处理 OPTIONS 请求：

   app.options('*', cors());
   

3. 使用通配符测试：暂时允许所有来源进行调试：

   app.use(cors({ origin: '*' }));
   

4. 确保正确的提取设置：在提取请求中使用

   mode: 'cors'

   ：

   fetch('https://your-backend-url.com/api/image-url', {
     method: 'GET',
     mode: 'cors',
     headers: { 'Content-Type': 'application/json' },
   });
   

5. 检查渲染 CORS 设置：确保渲染不会覆盖您的 CORS 设置。

6. 检查响应标头：确保在响应标头中设置

   Access-Control-Allow-Origin

   。

如果问题仍然存在，请在本地测试并检查渲染日志是否有错误。