0

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!

syahiruddin
  • 401
  • 5
  • 14

2 Answers2

0

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: https://console.cloud.google.com/functions/list -> Select the function you want, then go to the "Trigger" tab to view the function URL.

jfhr
  • 687
  • 5
  • 13
  • Hi @jfhr thank you for your prompt response. I'm not sure what function URL you meant. As I invoke the httpCallable function with the function name as stated by the extension from my Angular client as so. As for the URL that was posted in the question is from the error message prompted on the browser console. I'm confused, sorry. – syahiruddin Jul 18 '23 at 16:19
  • The function name that you pass to httpCallable should be equal to the pathname of the function URL, i.e. the part after `cloudfunctions.net/` – jfhr Jul 19 '23 at 14:22
0

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')),
syahiruddin
  • 401
  • 5
  • 14