1

I am unable to make calls to cloud functions from the browser because of Cors. There is nowhere in the documentation that talks about options for disabling it. Is it even possible? If not, why is it one of the basic examples of firebase web apps?

code:

                firebase
                .functions()
                .httpsCallable("helloWorld")()
                .then(() => {});

The code on server side shouldn't matter since it's a client-side issue of disabling the CORS policy. Is it even possible?

The error:

Access to fetch at 'https://us-central1-projectepic-adcf9.cloudfunctions.net/helloWorld' from origin 'https://projectepic-adcf9.web.app' has been blocked by CORS policy

There are similar questions out there but they all provide solutions that don't work.

Server side code:

const { onRequest } = require("firebase-functions/v2/https");
const logger = require("firebase-functions/logger");
const cors = require("cors")({ origin: true });

// Create and deploy your first functions
// https://firebase.google.com/docs/functions/get-started

exports.helloWorld = onRequest((request, response) => {
    cors(req, res, () => {
        logger.info("Hello logs!", { structuredData: true });
        res.set("Access-Control-Allow-Origin", "*");
        res.send("Hello from Firebase!");
    });
});
altywalty
  • 55
  • 6
  • 1
    Does this answer your question? [Enabling CORS in Cloud Functions for Firebase](https://stackoverflow.com/questions/42755131/enabling-cors-in-cloud-functions-for-firebase) – Titus Jul 02 '23 at 19:53
  • *The code on server side shouldn't matter since it's a client-side issue of disabling the CORS* That is not correct. The [**CORS**](https://developer.mozilla.org/en-US/docs/Glossary/CORS) error that you're getting is caused because the server doesn't send the required headers in order to let the browser know that the domain you're making the request from is allowed. – Titus Jul 02 '23 at 20:06
  • @Titus thank you Titus I didn't know this and will keep looking for a solution with this in mind. I still have tried all of those solutions in the link you sent anyways, however. – altywalty Jul 02 '23 at 20:09
  • `const cors = require("cors")({ origin: true });` means CORS enabled, set that to `false` to disable it (that will allow all domains access, you may want to only allow yours). – Titus Jul 02 '23 at 20:11
  • You can find out more details about the `origin` option from [HERE](https://www.npmjs.com/package/cors#configuration-options) – Titus Jul 02 '23 at 20:12

1 Answers1

2

You are mixing up callable type functions and normal HTTP functions. They are not the same, and they do not work together.

Your client code is trying to invoke a callable function, but it's deployed as a normal HTTP function using onRequest. If you want to write and invoke a callable function, you should review the example in the documentation on that and use onCall instead of onRequest.

Doug Stevenson
  • 297,357
  • 32
  • 422
  • 441