将 HTTP 函数连接到 Firebase 托管后出现 CORS 问题

Question

我有一个支持云功能的后端架构，可与我的 React Native 应用程序配合使用。现在，我正在尝试构建一个 React 应用程序仪表板，以便我可以可视化我的应用程序的资源和用户行为。我的方法保持不变，将所有调用路由到云函数端点https://[region]-[project].cloudfunctions.net/[function_name]。

挑战是我得到一个 CORS 阻止了我的来自浏览器的请求：这是可以理解的，解决方案是 set up a middleware to handle CORS，它已经完成并且运行良好。

import * as functions from 'firebase-functions'
import * as cors from 'cors';
const corsHandler = cors({origin: true});

const signUp = functions.https.onRequest((request, response) => {
  corsHandler(request, response, () => {;})

  .../ signUp logic below
})

一切看起来都很好，除了我不想停止 CORS 检查，即我想删除 corsHandler(request, response, () => {;}) 但同时我也不希望 CORS 阻止来自 Firebase 托管的请求。谷歌搜索后，我发现我可以将 HTTP 函数连接到 Firebase 托管，并在托管规则下使用 rewrites 访问云函数触发端点。

rewrites under hosting rule in firebase.json
--------------------------------------------
"rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      },
      {
        "source": "/signUp",
        "function": "signUp"
      }
    ]

但这也被 CORS 阻止了。我已阅读文档 here 和 here。我正在使用 Fetch API 的配置如下所示

 method: "GET", // POST
 mode: "cors", // no-cors, cors, *same-origin
 cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
 credentials: "same-origin", // include, *same-origin, omit
 headers: {
     Authorization: `Bearer ${access_token}`,
     "Content-Type": "text/json;application/json;charset=UTF-8"
 },
 redirect: "follow", // manual, *follow, error
 referrer: "no-referrer", // no-referrer, *client
 timeout: 20000

如有任何帮助，我们将不胜感激。谢谢

Answer 1

无法限制进入 Cloud Functions 的请求的来源。如果您的函数允许访问任何外部 IP 地址，则它必须允许访问所有 IP 地址。您必须控制访问的唯一方法是要求客户端提供一些凭据，您的函数可以在调用它时检查这些凭据。