-
Notifications
You must be signed in to change notification settings - Fork 408
Handle CORS with cloud functions & reactfire functions SDK? #483
-
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?
Beta Was this translation helpful? Give feedback.
All reactions
Fixed my issue. For any newbies struggling on CORS like me, here is how I fixed it:
-
Make sure your function is callable from other domains - set "allUsers/allAuthenticatedUsers" permissions to Invoke cloud function on your function
-
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) -
Allow Any origin after prefligh...
Replies: 2 comments 2 replies
-
Fixed my issue. For any newbies struggling on CORS like me, here is how I fixed it:
-
Make sure your function is callable from other domains - set "allUsers/allAuthenticatedUsers" permissions to Invoke cloud function on your function
-
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) -
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)
- 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)
Beta Was this translation helpful? Give feedback.
All reactions
-
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)
Beta Was this translation helpful? Give feedback.
All reactions
-
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?
Beta Was this translation helpful? Give feedback.
All reactions
-
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)
Beta Was this translation helpful? Give feedback.