为什么我在浏览器中收到 CORS 错误，但在 Postman 中却没有？

Question

我正在使用 Firebase 模拟器在本地主机上提供 Firebase 功能。如果我使用 Postman 测试我的功能，这一切都可以使用以下请求：

http://localhost:5001/project-XXXX/us-central1/api/users

然后，我在端口 3000 上启动我的 Next.js 应用程序并尝试使用 Axios 获取相同的数据，如下所示：

  useEffect(() => {

    axios
      .get(
        "http://localhost:5001/project-XXXX/us-central1/api/users"
      )
      .then((res) => {
        console.log(res);
      })
      .catch(function (error) {
        console.log(error);
      });

  }, []);

但是，现在我收到一个 CORS 错误：“从来源 'http://localhost:3000' 访问 'http://localhost:5001/project-XXXX/us-central1/api/appointments/availability' 处的 XMLHttpRequest 已被 CORS 策略阻止：否 'Access-Control-Allow-Origin' header 出现在请求的资源上。"

为了回答类似的问题，我尝试过更改区域并在禁用 web-security 的情况下启动 chrome，但均未成功解决问题。

有人知道为什么我从浏览器（而不是 Postman）请求时会收到此错误吗？

有关完整信息，我的 index.js Firebase 云函数文件使用 Express.js:

const functions = require("firebase-functions");
const admin = require("firebase-admin");

const express = require("express");
const cors = require("cors");

const authMiddleware = require("./authMiddleware");
const { user } = require("firebase-functions/v1/auth");

admin.initializeApp();
const app = express();

const { users, updateUser } = require("./routes/users");

// user-related routes
app.use("/users", users);

const api = functions.https.onRequest(app);

// export as Firebase functions
module.exports = { api: api, updateUser: updateUser };

Answer 1

谢谢 jub0bs！我的问题是通过安装 cors (npm install cors) 并将以下内容添加到我的 index.js:

中解决的

const cors = require("cors");
app.use(cors());

这会为所有来源启用 CORS，因此在投入生产之前仅用于开发和更改。

为什么我在浏览器中收到 CORS 错误，但在 Postman 中却没有？

Why am I getting a CORS error in the browser but not in Postman?

cors

express

firebase