CORS error when making Axios calls to Cloudrun service from Firebase hosted app

Question

This looks to be pretty obvious but I've been trying to figure it out for a couple of days now and still can't get it to work. Please, can someone point out what I'm missing.

I'm trying to make an axios call to my cloud run service from my firebase hosted SPA. To isolate the issue I followed the steps outlined in the [firebase tutorial for cloud run] (https://firebase.google.com/docs/hosting/cloud-run#node.js)

Step 4 of the tutorial talks about setting up rewrite to use the firebase domain as a proxy to your cloud run service. It says that the helloworld service would be reachable via

Your Firebase subdomains: projectID.web.app/helloworld and projectID.firebaseapp.com/helloworld

So I follow the steps and deploy the service. Then I try to make an axios call to the service from the SPA like below

testHelloWorld () {
  axios.get(`https://myProjectId.firebaseapp.com/helloworld`)
     .then((data) => {
       console.log(data)
     })
     .catch(ex => {
        console.error(ex)
     })
  })
}

But then I get the CORS error

Access to XMLHttpRequest at 'https://myProjectId.firebaseapp.com/helloworld' from origin 'https://myFirabaseApp.firebaseapp.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

This answer states that this should be possible so I'm not sure what I'm doing wrong.

N.B:

While debugging, I updated the node app from the tutorial to add cors support like below. Still didnt work.

const express = require('express');
const app = express();
const cors = require('cors'); //Imported and added this

app.use(cors()); // Used here

app.get('/', (req, res) => {
  console.log('Hello world received a request.');

  const target = process.env.TARGET || 'World';
  res.send(`Hello ${target}!`);
});

const port = process.env.PORT || 8080;
app.listen(port, () => {
  console.log('Hello world listening on port', port);
});

So the question here is, how do I make an Axios/AJAX call to my cloud run service using the firebase rewrite rule?

Answer 1

Please check if you have installed cors: npm install cors.

Please check if the 2 following options can solve your issue:

1= Use the following code :

 app.use(cors({origin:true,credentials: true}));

2) If the previous didn't work, please use the following code:

app.get('/', (req, res) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  console.log('Hello world received a request.');
}

Please let me know if it works for you.