Enabling CORS in Cloud Functions for Firebase

Question

I m currently learning how to use new Cloud Functions for Firebase and the problem I m having is that I can t access the function I wrote through an AJAX request  I get the  No  Access-Control-Allow-Origin   error  Here s an example of the function I wrote   exports test   functions https onRequest  request  response    gt      response status 500  send  test   Testing functions          The function sits in this url  https   us-central1-fba-shipper-140ae cloudfunctions net test  Firebase docs suggests to add CORS middleware inside the function  I ve tried it but it s not working for me  https   firebase google com docs functions http-events  This is how I did it   var cors   require  cors         exports test   functions https onRequest  request  response    gt       cors request  response       gt         response status 500  send  test   Testing functions                What am I doing wrong  I would appreciate any help with this   UPDATE   Doug Stevenson s answer helped  Adding   origin  true   fixed the issue  I also had to change response status 500  to response status 200  which I completely missed at first

User · Answer

For anyone trying to do this in Typescript this is the code   import   as cors from  cors   const corsHandler   cors  origin  true     export const exampleFunction  functions https onRequest async  request  response    gt           corsHandler request  response       gt                Your code here

User · Answer

This might be helpful  I created firebase HTTP cloud function with express custom URL   const express   require  express    const bodyParser   require  body-parser    const cors   require  cors    const app   express    const main   express     app post   endpoint    req  res    gt           code here     app use cors   origin  true      main use cors   origin  true      main use   api v1   app   main use bodyParser json     main use bodyParser urlencoded   extended  false       module exports functionName   functions https onRequest main     Please make sure you added rewrite sections   rewrites                      source     api v1               function    functionName

User · Answer

Changing true by     did the trick for me  so this is how it looks like   const cors   require  cors     origin           I tried this approach because in general  this is how this response header is set    Access-Control-Allow-Origin         Be aware that this will allow any domain to call your endpoints therefore it s NOT secure   Additionally  you can read more on the docs  https   github com expressjs cors

User · Answer

No CORS solutions worked for me    till now   Not sure if anyone else ran into the same issue I did  but I set up CORS like 5 different ways from examples I found and nothing seemed to work  I set up a minimal example with Plunker to see if it was really a bug  but the example ran beautifully  I decided to check the firebase functions logs  found in the firebase console  to see if that could tell me anything  I had a couple errors in my node server code  not CORS related  that when I debugged released me of my CORS error message  I don t know why code errors unrelated to CORS returns a CORS error response  but it led me down the wrong rabbit hole for a good number of hours     tl dr - check your firebase function logs if no CORS solutions work and debug any errros you have

User · Answer

If You are not using Express or simply want to use CORS  The following code will help resolve  const cors   require  cors     origin  true         exports yourfunction   functions https onRequest  request  response    gt         return cors request  response       gt                  Your code

User · Answer

Only this way works for me as i have authorization in my request   exports hello   functions https onRequest  request  response    gt    response set  Access-Control-Allow-Origin         response set  Access-Control-Allow-Credentials    true       vital if  request method      OPTIONS            Send response to OPTIONS requests     response set  Access-Control-Allow-Methods    GET        response set  Access-Control-Allow-Headers    Content-Type        response set  Access-Control-Max-Age    3600        response status 204  send        else       const params   request body      const html    some html       response send html

User · Answer

I have a little addition to  Andreys answer to his own question    It seems that you do not have to call the callback in the cors req  res  cb  function  so you can just call the cors module at the top of your function  without embedding all your code in the callback  This is much quicker if you want to implement cors afterwards   exports exampleFunction   functions https onRequest  request  response    gt        cors request  response       gt           return response send  Hello from Firebase           Do not forget to init cors as mentioned in the opening post   const cors   require  cors    origin  true

User · Answer

If there are people like me out there  If you want to call the cloud function from the same project as the cloud function it self  you can init the firebase sdk and use onCall method  It will handle everything for you   exports newRequest   functions https onCall  data  context    gt        console log  This is the received data    data          return data       Call this function like this      Init the firebase SDK first     const functions   firebase functions    const addMessage   functions httpsCallable  newRequest      Firebase docs  https   firebase google com docs functions callable  If you can t init the SDK here is the essence from the other suggestions    If you use firebase hosting and host in the default location  choose rewrites  https   firebase google com docs hosting full-config rewrites Or use CORS like krishnazden suggested  https   stackoverflow com a 53845986 1293220

User · Answer

If you don t can t use cors plugin  calling the setCorsHeaders   function first thing in the handler function will also work   Also use the respondSuccess Error functions when replying back   const ALLOWED ORIGINS     http   localhost 9090    https   sub example com    https   example com        Set CORS headers for preflight requests function setCorsHeaders  req  res      var originUrl    http   localhost 9090      if ALLOWED ORIGINS includes req headers origin        originUrl   req headers origin        res set  Access-Control-Allow-Origin   originUrl     res set  Access-Control-Allow-Credentials    true       if  req method      OPTIONS            Send response to OPTIONS requests     res set  Access-Control-Allow-Methods    GET POST   PUT   DELETE        res set  Access-Control-Allow-Headers    Bearer  Content-Type        res set  Access-Control-Max-Age    3600        res status 204  send             function respondError  message  error  code  res      var response         message  message      error  error       res status code  end JSON stringify response        function respondSuccess  result  res      var response         message   OK       result  result       res status 200  end JSON stringify response

User · Answer

A cors error can occur if you don t catch an error in a function  My suggestion is to implement a try catch in your corsHandler const corsHandler    request  response  handler    gt        cors   origin  true    request  response  async      gt            try               await handler                      catch  e                functions logger error  Error      e               response statusCode   500              response send                    status    ERROR    Optional  customize your error message here                                       Usage  exports helloWorld   functions https onRequest  request  response    gt        corsHandler request  response       gt            functions logger info  quot Hello logs  quot            response send                quot data quot    quot Hello from Firebase  quot                           Thanks to stackoverflow users  Hoang Trinh  Yayo Arellano and  Doug Stevenson

User · Answer

In my case the error was caused by cloud function invoker limit access  Please add allUsers to cloud function invoker  Please catch link   Please refer to article for more info

User · Answer

Found a way to enable cors without importing any  cors  library  It also works with Typescript and tested it in chrome version 81 0   exports createOrder   functions https onRequest  req  res    gt       browsers like chrome need these headers to be present in response if the api is called from other than its base domain   res set  Access-Control-Allow-Origin            you can also whitelist a specific domain like  http   127 0 0 1 4000    res set  Access-Control-Allow-Headers    Content-Type          your code starts here      send response   res status 200  send

User · Answer

I have just published a little piece on that   https   mhaligowski github io blog 2017 03 10 cors-in-cloud-functions html  Generally  you should use Express CORS package  which requires a little hacking around to meet the requirements in GCF Firebase Functions   Hope that helps

User · Answer

You can set the CORS in the cloud function like this   response set  Access-Control-Allow-Origin          No need to import the cors package

User · Answer

Simple solution using the Google Cloud Console Dashboard   Go to your GCP console dashboard    https   console cloud google com home dashboard   Go to menu    quot Cloud Functions quot    quot Compute quot  section    Select your cloud function  e g   quot MyFunction quot   a side menu should appear on the right showing you the access control settings for it  Click on  quot Add Member quot   type in  quot allUsers quot  and select the role  quot Cloud Function Invoker quot   Save it - gt  now  you should see a remark  quot Allow unauthenticated quot  in the list of your cloud functions   Access is now available to everybody from the internet with the correct config to your GCP or Firebase project   Be careful

User · Answer

There are two sample functions provided by the Firebase team that demonstrate the use of CORS   Time server with date formatting HTTPS endpoint requiring Authentication  The second sample uses a different way of working with cors than you re currently using  Consider importing like this  as shown in the samples  const cors   require  cors    origin  true     And the general form of your function will be like this  exports fn   functions https onRequest  req  res    gt        cors req  res       gt               your function body here - use the provided req and res from cors

User · Answer

For what it s worth I was having the same issue when passing app into onRequest  I realized the issue was a trailing slash on the request url for the firebase function  Express was looking for     but I didn t have the trailing slash on the function  project-id  cloudfunctions net  function-name   The CORS error was a false negative  When I added the trailing slash  I got the response I was expecting

User · Answer

One additional piece of info  just for the sake of those googling this after some time  If you are using firebase hosting  you can also set up rewrites  so that for example a url like  firebase hosting host  api myfunction redirects to the  firebase cloudfunctions host  doStuff function  That way  since the redirection is transparent and server-side  you don t have to deal with cors   You can set that up with a rewrites section in firebase json    rewrites                source     api myFunction    function    doStuff

User · Answer

If none of the other solutions work  you could try adding the below address at the beginning of the call to enable CORS - redirect      https   cors-anywhere herokuapp com    Sample code with JQuery AJAX request     ajax      url   https   cors-anywhere herokuapp com https   fir-agilan web app gmail mail asd gmail com     type   GET

User · Answer

From so much searching  I could find this solution in the same firebase documentation  just implement the cors in the path  import   as express from  quot express quot   import   as cors from  quot cors quot     const api   express    api use cors   origin  true      api get  quot  url quot   function    Link firebase doc  https   firebase google com docs functions http-events

User · Answer

If you re testing firebase app locally then you need to point functions to localhost instead of cloud  By default  firebase serve or firebase emulators start points the functions to server instead of localhost when you use it on your web app     Add below script in html head after firebase init script     lt script gt        firebase functions   useFunctionsEmulator  http   localhost 5001     lt  script gt        Make sure to remove this snippet when deploying code to server

User · Answer

Adding my piece of experience  I spent hours trying to find why I had CORS error  It happens that I ve renamed my cloud function  the very first I was trying after a big upgrade   So when my firebase app was calling the cloud function with an incorrect name  it should have thrown a 404 error  not a CORS error  Fixing the cloud function name in my firebase app fixed the issue  I ve filled a bug report about this here https   firebase google com support troubleshooter report bugs

[javascript] Enabling CORS in Cloud Functions for Firebase

Examples related to javascript

Examples related to firebase

Examples related to google-cloud-platform

Examples related to cors

Examples related to google-cloud-functions