invertase / stripe-firebase-extensions

Repository of Firebase Extensions built by Stripe.
https://firebase.google.com/products/extensions
Apache License 2.0
433 stars 162 forks source link

CORS issue when calling function #504

Closed jettdc closed 1 year ago

jettdc commented 1 year ago

Bug report

Describe the bug

When calling ext-firestore-stripe-payments-createPortalLink getting the cors error:

Access to fetch at 'https://us-central-1-<myapp>.cloudfunctions.net/ext-firestore-stripe-payments-createPortalLink' from origin 'http://localhost:3000' 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.

Screenshots

const functions = getFunctions(firebaseApp, 'us-central1')
const functionRef = httpsCallable(functions, 'ext-firestore-stripe-payments-createPortalLink');

As far as I can tell, it's being called correctly.

System information

Additional context

I am aware of the other issue here #59, but I've double checked that my region and function names are correct!

thetwentyseven commented 1 year ago

I do have exactly the same issue in local and production.

thetwentyseven commented 1 year ago

I got it working. My problem was the name of the function:

        const functions = getFunctions();
        const functionRef = httpsCallable(functions, 'ext-firestore-stripe-payments-createPortalLink');
        const { data } = await functionRef({
            returnUrl: window.location.origin,
            locale: "auto", // Optional, defaults to "auto"
        });
        window.location.assign(data.url);
jelling commented 1 year ago

Had the same issue due to the name of the function. Root cause is that the documentation is out of date:

Doc page: https://firebase.google.com/codelabs/stripe-firebase-extensions#4

image

VukIG commented 4 months ago

I am having the same issue

const functions = getFunctions(app, 'us-central1');

const functionRef = httpsCallable(functions, 'ext-firestore-stripe-payments-createPortalLink');

const { data } = await functionRef({

customerId: user?.uid,

returnUrl: window.location.origin, });

Access to fetch at 'https://us-central1-pizzaplace-a31d7.cloudfunctions.net/ext-firestore-stripe-payments-createPortalLink' from origin 'http://localhost:5173' 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.