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

【问题标题】：Why am I getting a CORS error in the browser but not in Postman?为什么我在浏览器中收到 CORS 错误，但在 Postman 中却没有？
【发布时间】：2022-01-18 17:46:04
【问题描述】：

我正在使用 Firebase 模拟器在 localhost 上提供 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 访问 'http://localhost:5001/project-XXXX/us-central1/api/appointments/availability' 处的 XMLHttpRequest :3000' 已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。”

针对类似的问题，我尝试更改区域并在禁用网络安全的情况下启动 chrome，但均未能成功解决问题。

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

有关完整信息，我的 Firebase 云函数的 index.js 文件使用 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 };

【问题讨论】：

同源策略是浏览器（而不是像 Postman 这样的用户代理）强制执行的。您需要为 CORS 配置后端。见expressjs.com/en/resources/middleware/cors.html

标签： firebase express cors

【解决方案1】：

感谢 jub0bs！我的问题通过安装 cors (npm install cors) 并将以下内容添加到我的 index.js 中得到解决：

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

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

【讨论】：