Question 221112 in Firebase Question posted in
An extensive official documentation can be found here.

CORS error for a Firebase Extension Function on localhost (Angular)

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!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    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')),

  2. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search