CODEWITHSUNDEEP
reactjscorsgoogle-cloud-functionsfirebase-hosting
Chukwuma Nwaugha
Chukwuma Nwaugha

Reputation: 715

Issues with CORS after connecting HTTP Functions to Firebase Hosting

I have a Cloud functions powered backend architecture which works with my React Native App. Now, am trying to build a React app dashboard so that I can visualize my application's resources and user behaviors. My approach remains the same, route all calls to the cloud functions endpoint https://[region]-[project].cloudfunctions.net/[function_name].

The challenge is that I get a CORS blocking my request from the browser: This is understandable and the solution is to set up a middleware to handle CORS which has been done and works well. 

import * as functions from 'firebase-functions'
import * as cors from 'cors';
const corsHandler = cors({origin: true});

const signUp = functions.https.onRequest((request, response) => {
  corsHandler(request, response, () => {;})

  .../ signUp logic below
})

Everything looks Ok, except that I don't want to stop the CORS check, i.e. I want to remove corsHandler(request, response, () => {;}) but the same time I also don't want CORS blocking requests from Firebase hosting. After Googling, I discovered I can connect HTTP Functions to Firebase Hosting and use rewrites under the hosting rule to access cloud functions trigger endpoints.

rewrites under hosting rule in firebase.json
--------------------------------------------
"rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      },
      {
        "source": "/signUp",
        "function": "signUp"
      }
    ]

But this is also blocked by CORS. I have read the documentation here and here. I am using Fetch API with a config as shown below

 method: "GET", // POST
 mode: "cors", // no-cors, cors, *same-origin
 cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
 credentials: "same-origin", // include, *same-origin, omit
 headers: {
     Authorization: `Bearer ${access_token}`,
     "Content-Type": "text/json;application/json;charset=UTF-8"
 },
 redirect: "follow", // manual, *follow, error
 referrer: "no-referrer", // no-referrer, *client
 timeout: 20000

Please any help would be appreciated. Thanks

Upvotes: 1

Views: 422

Answers (1)

Doug Stevenson
Doug Stevenson

Reputation: 317587

It is not possible to limit the origin of requests coming into Cloud Functions. If your function allows access to any outside IP address, it must allow access to all IP addresses. The only way you have to control access is to require the client to provide some credentials which your function can check when it's invoked.

Upvotes: 1

Related Questions