在使用 node.js 和 Express 构建的 api 中使用 cors 中间件时出现 CORS 错误答案

【问题标题】：CORS error when use cors middleware in an api built with node.js and Express在使用 node.js 和 Express 构建的 api 中使用 cors 中间件时出现 CORS 错误
【发布时间】：2018-12-15 11:46:22
【问题描述】：

我是 node 和 express 的新手。我在构建一个非常简单的 API 时遇到了一个 cors 错误。我已经尝试了几个小时以不同的方法解决它，但这些都不起作用。

这是我的方法

const functions = require('firebase-functions');
const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors({ origin: true }));

app.get('/api', (req, res) => {
  res.send('Hello');
});

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

并得到 4 个错误：
Access-Control-Allow-Origin 不允许http://localhost:3000。

我还尝试了其他几种方法：

var allowCrossDomain = function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Cache-Control");
    next();
};
app.use(allowCrossDomain);

这给了我同样的错误。
我正在使用 Firebase Cloud Function 来部署这个 api，因为代码非常简单，所以我真的不知道哪个部分做得不对。

【问题讨论】：

标签： firebase express cors google-cloud-functions

【解决方案1】：

CORS 总是一个棘手的问题，但在这种情况下，我想我可能会提供帮助。当您运行 firebase deploy 时，您应该会看到您的端点已部署。如果这是您第一次部署该函数，它应该在控制台中打印出该新函数的完整 URL，它通常看起来像这样：

https://us-central1-your-project-name.cloudfunctions.net/apiEndpointName

如果您已经部署了它，您可以在 Firebase 控制台 -> 函数 -> 仪表板中看到该函数的完整 URL

该 URL 是该函数的普通公共 API 端点或“HTTP 触发器”。如果您使用 Postman 向该 URL 发出 GET 请求，您应该会收到 Hello 响应。（或者，如果您在浏览器中访问了该 URL，您的浏览器会向该 URL 发出 GET 请求，您也应该在那里得到您的 Hello 响应）

当您想从部署/托管的网站访问它时，问题就来了。您需要告诉 Firebase 的托管部分将 /api 的任何流量路由到您的函数 - 您的 Firebase 托管应该不尝试将 /api 路由解析为同时部署的普通 HTML 页面主 index.html 文件...相反，它应该将 /api 的任何流量引导到云函数 api

因此，您需要告诉 Firebase 将 /api 的所有流量定向到云功能，而不是托管。您在 firebase.json 文件中提供 Firebase 命令/配置...在这种情况下，在名为“rewrites”的部分下，如下所示：

{
  "hosting": {
    "public": "public",

    // Add the following rewrites section *within* "hosting"
    "rewrites": [ {
      "source": "/bigben", "function": "bigben"
    } ]

  }
}

查看this documentation link，它解释了所有这些^^

完成后，重新部署所有内容，现在您应该可以在浏览器中访问/api 并触发该功能。注意除非您使用firebase serve，否则您应该访问已部署网站 上的路由，而不是本地主机。在firebase serve 上查看this link for more details。

【讨论】：