does anyone know how to solve the CORS error for a Firebase Extension Function on localhost?
In summary, I'm trying to use an extension called "Authenticate with Stream Chat." Inside the extension, there are several functions. One of them is an onCall function called "getStreamUserToken" (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's how I'm calling it from the client side:
getStreamToken() { const result = httpsCallable( this.functions, 'getStreamUserToken' ); result({}).then((response) => { console.log(response.data); }); }
However, I'm encountering the following error:
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.
I understand that this is a CORS error, and I'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've been stuck here for weeks. Thanks in advance!
Resolved the issue when I found out that I, by default, Firebase functions region is us-central1. While my function is the configuration for my extension is in southeast-asia1 hence, the error
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.
So what I need to do is defined the region when importing the functions into my Angular app as so:
provideFunctions(() => getFunctions(getApp(), 'asia-southeast1')),