Handle CORS with cloud functions & reactfire functions SDK?

[JurgenPalsma]

Hello,

Would anyone know how to setup CORS correctly to use google cloud functions with the reactfire functions SDK?

I've enabled CORS in my cloud function & allowed function invoke from allUsers, but cannot figure how to setup the preflight correctly

Current code:

React component:
const functions = useFunctions(); functions.region = 'europe-west3'; const parseFunction = httpsCallable<{ text: string }, string>(functions, 'helloworld');

Cloud function:
`def hello_world(request):
# Set CORS headers for preflight requests
if request.method == 'OPTIONS':
headers = {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'POST',
'Access-Control-Allow-Headers': 'Content-Type',
'Access-Control-Max-Age': '3600',
}
return ('', 204, headers)

# Set CORS headers for main requests
headers = {
    'Access-Control-Allow-Origin': '*',
}

return (json.dumps({'status': 'sucess'}), 200, headers)`

This gives me
Access to fetch at 'XXXX' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response.

Any ideas or good documentation on this?

[JurgenPalsma]

Fixed my issue. For any newbies struggling on CORS like me, here is how I fixed it:

1. Make sure your function is callable from other domains - set "allUsers/allAuthenticatedUsers" permissions to Invoke cloud function on your function

2. Handle preflight options in your cloud function:
   if request.method == 'OPTIONS': headers = { 'Access-Control-Allow-Origin': '*', # <- Allow your function to be called from any domain 'Access-Control-Allow-Methods': 'POST', # <- POST or any method type you need to call 'Access-Control-Allow-Headers': 'Content-Type, Authorization', # <- Authorization Header needed 'Access-Control-Max-Age': '3600', } return ('', 204, headers)

3. Allow Any origin after preflight request & make sure your return body contains a 'data' field

# Set CORS headers for main requests headers = { 'Access-Control-Allow-Origin': '*', } return (json.dumps({'status': 'sucess', 'data': YOUR_DATA}), 200, headers)

4. Handle Auth in function after preflight request
   authorization = request.headers.get('Authorization') token = authorization.split('Bearer ')[1] try: # This will fail in every situation BUT successful authentication decode_token = auth.verify_id_token(id_token=token)

[kishore7403]

Thanks a lot, After a lot of pain, this solution actually worked.

For people, who may need it in the future. I am just adding the template on how your cloud function must look like. In my case, I was just making a post request.

#import required packages
import json

def function_name(request):
    if request.method == 'OPTIONS':
        headers = {
            'Access-Control-Allow-Origin': '*',  # Allow your function to be called from any domain
            'Access-Control-Allow-Methods': 'POST',  # POST or any method type you need to call
            'Access-Control-Allow-Headers': 'Content-Type', 
            'Access-Control-Max-Age': '3600',
        }
        return ('', 204, headers)

    # Set CORS headers for main requests
    headers = {
        'Access-Control-Allow-Origin': '*',
    }

    # Your code logic goes here

    # Return your response
    return (json.dumps({'status': 'success'}), 200, headers)

[manjunadha007]

Make sure your function is callable from other domains - set "allUsers/allAuthenticatedUsers" permissions to Invoke cloud function on your function

What is the specific permission after giving allUsers/allAuthenticatedUsers?

[kishore7403]

If you want to Allow all HTTP methods request to your google cloud function from the front end and face an issue with CORS. The Following template must work. It worked for me.

#import required packages
import json

def function_name(request):
    if request.method == 'OPTIONS':
        headers = {
            'Access-Control-Allow-Origin': '*',  # Allow your function to be called from any domain
            'Access-Control-Allow-Methods': '*',  # Allow all HTTP methods
            'Access-Control-Allow-Headers': 'Content-Type', 
            'Access-Control-Max-Age': '3600',
        }
        return ('', 204, headers)

    # Set CORS headers for main requests
    headers = {
        'Access-Control-Allow-Origin': '*',
    }

    # Your code logic goes here

    # Return your response
    return (json.dumps({'status': 'success'}), 200, headers)