AngularFire：如何连接到预览频道中部署的云功能？ (CORS)

Question

我有一个 AngularFire 项目，我使用 Cloud Functions 的onCall 来定义一些服务器端函数。我将这些功能的最新版本部署到我的域（使用firebase deploy --only functions）。然后我部署了一个预览频道（使用firebase:hosting:channel:deploy）。当我尝试使用预览频道中的功能时，出现 CORS 错误：

“从源 [我的预览频道 URL] 获取 [我的函数 URL] 的访问权限已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：否 'Access-Control-Allow-Origin'请求的资源上存在标头。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。”

如何说服预览频道中的应用连接到我的域的 Cloud Functions？

Answer 1

应用程序和服务器的基本行为似乎如下：

1. 应用程序发出一个 OPTIONS 请求（Chrome 称为“预检请求”）。 OPTIONS 请求包含预览频道 URL 的 origin。 host 是函数 URL。
2. Cloud Functions 以缺少 Access-Control-Allow-Origin 的标头进行响应。

来自 Cloud Functions 的有问题的响应是错误的直接原因。

解决方案显然是将 AngularFire 的函数的 ORIGIN 设置更改为预览 URL，在 this documentation 的末尾进行描述。这似乎导致了这种行为：

1. 应用程序发出一个 OPTIONS 请求（Chrome 称为“预检请求”）。 OPTIONS 请求包含预览频道 URL 的 origin。 host 是 预览频道 URL。 （虽然称为 ORIGIN，但 ORIGIN 似乎更改了 host 请求标头。）
2. Cloud Functions 使用包含 Access-Control-Allow-Origin 的标头进行响应。

使用 AngularFire 成功部署到预览频道的总体步骤似乎是：

1. 使用 firebase deploy --only functions 将您的最新功能部署到您的常规应用程序域。
2. 使用firebase:hosting:channel:deploy 将您的应用部署到预览频道。
3. 记下返回的预览频道 URL。
4. 无论您在何处设置函数的 ORIGIN，都请使用预览频道 URL，而不是您的普通应用域。
5. 使用firebase:hosting:channel:deploy 再次将您的应用部署到预览频道。