firebase cloud function CORS error with axios request

Question

I have a generic cloud function:

const functions = require('firebase-functions');
const cors = require('cors')({ origin: true });

exports.helloWorld = functions.https.onRequest((request, response) => {
    cors(request, response, () => {
        res.status(200).send("Hello from Firebase!");
    });
});

And I am calling it from a client using axios:

  axios
    .get(
      "https://us-central1-dev-imcla.cloudfunctions.net/helloWorld",
    )
    .then((res) => {
      console.log(res);
    })
    .catch(er=>{
      console.log(er);
    })

And I have 2 issues:

1. I get CORS error.

Access to XMLHttpRequest at 'https://myurl/helloWorld' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. xhr.js?b50d:178 GET https://us-central1-dev-imcla.cloudfunctions.net/helloWorld net::ERR_FAILED

2. If i turn on the cors plugin from the browser or if i call the function from postman I get this error:

Error: Forbidden Your client does not have permission to get URL /helloWorld from this server.

Error: Request failed with status code 403 at createError (createError.js?2d83:16) at settle (settle.js?467f:17) at XMLHttpRequest.handleLoad (xhr.js?b50d:61)

And the thing is that I am both authenticated user and I have the cors package in the cloud code.

Answer 1

Could possibly not be CORS related. Check firebase function logs to see if you have any errors in your code.

https://stackoverflow.com/a/51103084/5781575

Answer 2

Is needed to add the following to handle CORS requests in your Cloud Function:

exports.corsEnabledFunction = (req, res) => {
  // Set CORS headers for preflight requests
  // Allows GETs from any origin with the Content-Type header
  // and caches preflight response for 3600s

  res.set('Access-Control-Allow-Origin', '*');

  if (req.method === 'OPTIONS') {
    // Send response to OPTIONS requests
    res.set('Access-Control-Allow-Methods', 'GET');
    res.set('Access-Control-Allow-Headers', 'Content-Type');
    res.set('Access-Control-Max-Age', '3600');
    res.status(204).send('');
  } else {
    res.send('Hello World!');
  }
};

You can try with this example. This is the guthub repo where is the complete code.