问题

有人知道如何解决本地主机上 Firebase 扩展函数的 CORS 错误吗？

简而言之，我正在尝试使用一个名为 "Authenticate with Stream Chat" 的扩展。在扩展内部，有几个函数。其中之一是一个名为 "getStreamUserToken" 的 onCall 函数（您可以在此处查看源代码：https://github.com/GetStream/stream-firebase-extensions/blob/main/auth-chat/functions/src/index.ts），它返回用户令牌。
以下是我从客户端调用它的方式：

getStreamToken() { 
    const result = httpsCallable( this.functions, 'getStreamUserToken' ); 
    result({}).then((response) => { console.log(response.data); }); 
} 

然而，我遇到了以下错误：

来自源 'http://localhost:4200' 对 'https://us-central1-project.cloudfunctions.net/getStreamUserToken' 的跨域请求已被阻止，因为未通过访问控制检查：所请求的资源上没有 'Access-Control-Allow-Origin' 标头。如果不透明的响应满足您的需求，请将请求的模式设置为 'no-cors' 以禁用 CORS 获取资源。

我理解这是一个 CORS 错误，我想解决它。我可以编辑扩展代码来修复它吗？如果可以，如何操作？或者，是否有其他解决此问题的方法？或者我做错了什么吗？

拜托，我在这里卡了好几周了。提前感谢！

<details>
<summary>英文:</summary>

does anyone know how to solve the CORS error for a Firebase Extension Function on localhost?

In summary, I&#39;m trying to use an extension called &quot;Authenticate with Stream Chat.&quot; Inside the extension, there are several functions. One of them is an onCall function called &quot;getStreamUserToken&quot; (you can view the source code here: https://github.com/GetStream/stream-firebase-extensions/blob/main/auth-chat/functions/src/index.ts), which returns the user token.
Here&#39;s how I&#39;m calling it from the client side:

    getStreamToken() { const result = httpsCallable( this.functions, &#39;getStreamUserToken&#39; ); result({}).then((response) =&gt; { console.log(response.data); }); } 

However, I&#39;m encountering the following error:

    Access to fetch at &#39;https://us-central1-project.cloudfunctions.net/getStreamUserToken&#39; from origin &#39;http://localhost:4200&#39; has been blocked by CORS policy: Response to preflight request doesn&#39;t pass access control check: No &#39;Access-Control-Allow-Origin&#39; header is present on the requested resource. If an opaque response serves your needs, set the request&#39;s mode to &#39;no-cors&#39; to fetch the resource with CORS disabled. 

I understand that this is a CORS error, and I&#39;d like to resolve it. Can I edit the extension code to fix it? If so, how? Alternatively, is there another workaround for this issue? Or am I doing something wrong?

Please, I&#39;ve been stuck here for weeks. Thanks in advance! 

</details>


# 答案1
**得分**: 0

你确定函数的 URL 正确吗？通常来自扩展的函数在函数名称之前有一个前缀，例如：
`https://us-central1-project.cloudfunctions.net/ext-example1-getStreamUserToken`

您可以在 Firebase 控制台的“函数”选项卡中找到函数的 URL。

或者，您可以使用 Google Cloud 控制台：
&lt;https://console.cloud.google.com/functions/list&gt;
-> 选择您想要的函数，然后转到“触发器”选项卡以查看函数的 URL。

<details>
<summary>英文:</summary>

Are you sure the function URL is correct? Usually functions from an extension have a prefix before the function name, e.g. 
`https://us-central1-project.cloudfunctions.net/ext-example1-getStreamUserToken`

You can find the function URL in the Firebase console in the Functions tab.

 Alternatively you can use the Google Cloud console:
&lt;https://console.cloud.google.com/functions/list&gt;
-&gt; Select the function you want, then go to the &quot;Trigger&quot; tab to view the function URL.

</details>



# 答案2
**得分**: 0

已解决问题，当我发现默认情况下，Firebase函数的区域是`us-central1`，而我的函数配置是在`southeast-asia1`，因此出现了错误：

```html
从来源'http://localhost:4200'访问'https://us-central1-project.cloudfunctions.net/getStreamUserToken'时，已被CORS策略阻止：对预检请求的响应未通过访问控制检查：请求的资源上没有'Access-Control-Allow-Origin'头。如果不透明的响应满足您的需求，请将请求的模式设置为'no-cors'以禁用CORS获取资源。

所以我需要在将函数导入到我的Angular应用程序时定义区域，如下所示：

provideFunctions(() => getFunctions(getApp(), 'asia-southeast1')),

Access to fetch at 'https://us-central1-project.cloudfunctions.net/getStreamUserToken' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. 

provideFunctions(() => getFunctions(getApp(), 'asia-southeast1')),