1

The functions I have created is working fine in local using firebase serve command. When I deployed it to firebase functions it started to throw error:

"Access to XMLHttpRequest at 'https://us-central1-mysample.cloudfunctions.net/api/configSettings' from origin 'https://mysample.web.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource"

Below are the key points about the project & code:

  1. Using ExpressJs for web API creation
  2. Both Hosting and Functions are inside same Firebase project only
  3. I have tried below CORS npm package implementation

const cors = require('cors')

    var corsOptionsDelegate = function (req, callback) {
    console.log("req.header('Origin') : ", req.header('Origin'))
    var corsOptions;
    if (whitelist.indexOf(req.header('Origin')) !== -1) {
        corsOptions = { origin: true } // reflect (enable) the requested origin in the CORS 
    response
    } else {
        corsOptions = { origin: false } // disable CORS for this request
    }
    callback(null, corsOptions) // callback expects two parameters: error and options
    }

    app.options('*', cors(corsOptionsDelegate));
  1. Also I have tried with below way:

app.use((req, res, next) => {
    const allowedOrigins = ['https://mysample.web.app', 'https://mysample.firebase.webapp'];
    const origin = req.headers.origin;
    console.log("origin : ", origin)
    if (allowedOrigins.includes(origin)) {
         res.setHeader('Access-Control-Allow-Origin', origin);
    }
    res.setHeader('Access-Control-Allow-Methods', 'GET,POST,OPTIONS');
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
    res.setHeader('Access-Control-Allow-Credentials', true);
    return next();
  });

But none of the way resolved my issue. Is there any setting I have to in Firebase portal ? Any help.

Vaira Selvam RajaGopalan
  • 21
  • 4
  • I double checked the rewrites in firebase.json "rewrites": [ { "source": "**", "function": "myfunctionname" } ] – Vaira Selvam RajaGopalan Sep 22 '22 at 13:43
  • please check the suggestions mentioned in this stackoverflow [link1](https://stackoverflow.com/questions/42755131/enabling-cors-in-cloud-functions-for-firebase), [link2](https://stackoverflow.com/questions/50278537/firebase-callable-function-cors) & this [blog](https://haha.world/firebase-cors/) – Sathi Aiswarya Sep 23 '22 at 12:42
  • Thanks Sathi Aiswarya the Link2 resolved my issue. Added new role "Cloud Functions Invoker" to "allUsers" member. But nowhere in the Google Documentation. – Vaira Selvam RajaGopalan Sep 24 '22 at 19:33
  • I have provided an answer below.please check, so that others could spot the workaround easier – Sathi Aiswarya Sep 28 '22 at 07:07

1 Answers1

0

@Vaira Selvam RajaGopalan confirmed the issue was solved by adding a new role Cloud Functions Invoker to "allUsers" .To invoke a cloud function, a user must be assigned the Cloud Functions Invoker role.

To allow unauthenticated invocation of a function, grant the Cloud Functions Invoker role to the special allUsers principal on the function:Refer this document

  1. Go to the Google Cloud console:
  2. Click the checkbox next to the function to which you want to grant access.
  3. Click Permissions at the top of the screen. The Permissions panel opens.
  4. Click Add principal.
  5. In the New principals field, type allUsers.
  6. Select the role Cloud Functions > Cloud Functions Invoker from the Select a role drop-down menu.
  7. Click Save.
Sathi Aiswarya
  • 2,068
  • 2
  • 11