CORS issue on/in nodejs and react application via cloudflare tunnel

Hi,

So the scenario is as follows:

  1. Have my frontend and backend both under a single docker-compose.yml along with a cloudflare tunnel
  2. The tunnel has then two public hostnames (CNAMEs) mapped to frontend.example.comfrontend service name:port and backend.example.combackend service name:port
  3. These two are working fine individually when I tested locally and after serving via cloudflare tunnel

Now the issue is:

  1. For the sake of simplicity and testing I enabled “cloudflare access” and CORS settings are (refer screenshot: Imgur: The magic of the Internet)
  2. Then whenever I’m trying to send a request from frontend to the backend, I’m getting the cloudflare access screen for response (refer screenshot: Imgur: The magic of the Internet)
  3. So again for the sake of simplicity I removed my backend.example.com from the cloudflare access and then all of a sudden I’m am completely getting CORS error

My backend CORS config is:

app.use(cors({
    origin: 'https://frontend.example.com
  }));  

and frontend api baseurl is:

const API = axios.create({
  baseURL: 'https://backend.example.com'
)}

I am kind of stuck here as I am a little new to CORS and related stuff, if anyone can help would be appreciated.

If more details are required, I can provide those.