6

My current usecase is simple, I just need to make a post request to a cloud function I have locally developed.

The catch is, when I fire

firebase serve

the hosting is deployed on localhost:5000

and cloud functions are deployed on localhost:5001

These both are from different origin as port is different. Thus, when the browser sends the initial preflight request, it fails with error message 

Failed to load http://localhost:5001/projectname/region/sendEnquiry: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:5000' is therefore not allowed access.

How can I set the headers for testing this locally?(Again here I am not a pro, I am guessing I will have same origin when I decide to deploy in production. If not, anyways I will still need the solution)

Thanks.

Abhishek Agarwal
  • 694
  • 1
  • 9
  • 25

3 Answers3

1

Google restricts certain calls but you can configure CORS for your firebase projects. It's hard to find how to do this by means of the very confusing docs, took me a while to find the right way.

Follow these steps:

  1. Go to console.cloud.google.com
  2. At the top left, select your Firebase project
  3. Click the terminal icon at the top left (looks like >_)
  4. In the terminal that opens, click the three dots icon and select 'Upload file'
  5. Upload a file called cors.json with the following contents:
[
 {
   "origin": ["*"],
   "method": ["GET"],
   "maxAgeSeconds": 3600
 }
]
  1. In the terminal, run the following command: gsutil cors set cors.json gs://yourbucketname.appspot.com (change the url)

This allows any GET requests from other origins.

paddotk
  • 1,359
  • 17
  • 31
1

When using the Firebase Cloud Functions emulator for local development, CORS is handled automatically so you do not need to write any code to handle it. However, often other problems will present as CORS errors in the browser, because the pre-flight OPTIONS request required for CORS is failing for some reason. There are multiple possible causes for this including:

  • The function does not exist (check the name matches)
  • The function throws some error which is not handled correctly

For more discussion and possible causes see this thread.

Justin Emery
  • 1,644
  • 18
  • 25
0

Note that the server and cloud functions are different services and will always be at different ports.

CORS is really triggered by cross-domain issues. If it's all local, there shouldn't really be a cross domain violation.

You didn't provide any info on your client, so we can't give you client specific workarounds. But there are several Chrome Extensions that allow you disable CORS checks for this kind of local testing. Search the Chrome Store and find one that suits your needs. https://chrome.google.com/webstore/search/cors?hl=en

joelm
  • 8,741
  • 1
  • 19
  • 17
  • The client is an angular app running on localhost:5000. Apart from the plugin sugesstion, is it possible to configure the headers in cloud functions? – Abhishek Agarwal Apr 17 '18 at 14:18
  • CORS is local issue when the domains don't match. I don't believe there is anyway to solve this from the server. Here's another answer that may provide more details for you: https://stackoverflow.com/questions/42755131/enabling-cors-in-cloud-functions-for-firebase?rq=1 – joelm Apr 17 '18 at 18:02