如何在 firebase 托管中托管单页 webapp 的静态文件，并将 web API 部署在不同的服务器中

Posted 2023-02-22

【中文标题】如何在 firebase 托管中托管单页 webapp 的静态文件，并将 web API 部署在不同的服务器中

【英文标题】：How to host static files of a single page webapp in firebase hosting, and deploy the web API in a different server

【发布时间】：2021-08-11 04:50:37

【问题描述】：

我有一个单页 web 应用程序，它使用通过同一域公开的 REST API。目前，静态文件由公开 REST API 的同一台服务器提供服务。

我正在尝试将服务于 Firebase 托管的静态文件卸载。如果我将静态文件移动到 firebase 托管，我必须将我的域的 DNS 条目指向 firebase 托管，这将使 web 应用程序也向 firebase 托管发出 REST 请求。

我可以更新 web 应用程序，以便它将 REST 请求发送到当前服务器地址而不是 Firebase 托管，但它会使请求变慢，因为由于 CORS，浏览器会在发出每个请求之前使用预检请求。

有谁知道如何正确解决这个问题？

【参考方案1】：

这可以用Hosting Config 处理，特别是使用重定向，您可以引用位置/foo 作为您的静态网址路径，并让它从/bar 加载内容

"hosting": 
  // ...

  // Returns a permanent redirect to "/bar" for requests to "/foo" (but not "/foo/**")
  "redirects": [ 
    "source": "/foo",
    "destination": "/bar",
    "type": 301
   ]

如果您需要使用重写等方式处理云功能，还有其他选择，我怀疑组合将满足您的需求。请查看文档中的full example 以供参考。

更新：

要设置不带 cors 的 API 路由 - 您可以执行以下操作

app.get("/apiPath", cors(origin: false), (req, res) => 
  /...
)

【讨论】：

我不喜欢向浏览器发送重定向，因为它会增加延迟（浏览器在收到重定向后需要再次将请求发送到我的 REST 端点，包括预检请求）。此外，将我的 REST 服务迁移到 cloud run 对我来说也不是一个简单的解决方案。

如果是这种情况，您是否考虑过使用带有指向 Web API 的子域的域？ api.myapp.com 这是相当标准的，允许您在事件的 DNS 端重定向，而不是依赖托管本身的中间体

一旦涉及到不同的域，CORS 就会出现，浏览器必须发送预检请求，从而增加延迟，对吗？

您可以使用 no-cors 标志 - 但大多数 API 从一开始就已经涉及 CORS。无论如何，如果您想要 no-cors，它会将您的请求限制为 HEAD、GET 和 POST，并且您仅限于简单的标头 developer.mozilla.org/en-US/docs/Glossary/… 谢天谢地，这些只是轻微的不便

我的 API 需要 Authorization 标头和其他一些标头，因此请求不属于简单请求的类别。