22 replies

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

docker-compose.yml

along with a cloudflare tunnel
2. The tunnel has then two public hostnames (CNAMEs) mapped to

frontend.example.com

frontend.example.com

frontend service name:port

frontend service name:port

and

backend.example.com

backend.example.com

backend service name:port

backend 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 1)
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 2)
3. So again for the sake of simplicity I removed my

backend.example.com

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
  }));

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

and frontend api baseurl is:

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

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.

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

Similar Threads