Pfthb

I'm trying to deploy an application to AWS ECS. The application's backend is a microservice and the client side is a react app with server-side rendering.

The backend is deployed in the private subnet in ECS with an internal load balancer. Same with the client side, deployed in the same private subnet but in a different ECS cluster( with separate ECS instances ). Also, the client side is connected to an internet-facing Application Load Balancer.

Following diagram depicts the AWS architecture I described

The issue

Whenever a GET or a POST or any other HTTP request made by the React App doesn't reach the backend. But all of these works fine when I run the app locally

When I SSH into the client side's ECS instance and do a GET or a POST call using CURL with the backend internal load balancer DNS name, it works perfectly and does the appropriate HTTP request to the backend. I also tried the same thing by SSH into the client side docker container and works without any issues.

Following is an example of the action that makes the backend call

export function getData() 
 return 
 type: "GET_DATA",
 payload: new Promise((resolve, reject) => 
 app.auth().onAuthStateChanged((id) => 
 if(id) 
 axios.get(process.env.BACKEND_HOST+`/service1/$id`)
 .then((response) => 
 if(response.data == "") 
 reject(false);
 
 resolve(response.data)
 ).catch((error) => console.log(error) )
 else 
 reject(false);
 
 ) 
 )
 

Following is the error output I get when the above call is made

OPTIONS http://internal-cc-backend-lb-238318069.us-east-1.elb.amazonaws.com/service1/data net::ERR_CONNECTION_TIMED_OUT
Error: Network Error
 at e.exports (bundle.js:30)
 at XMLHttpRequest.f.onerror (bundle.js:30)

OPTIONS http://internal-cc-backend-lb-238318069.us-east-1.elb.amazonaws.com/service1 net::ERR_CONNECTION_TIMED_OUT
Error: Network Error
 at e.exports (bundle.js:30)
 at XMLHttpRequest.f.onerror (bundle.js:30)

GET http://internal-cc-backend-lb-238318069.us-east-1.elb.amazonaws.com/service1/XfSOjVUFCcSoNEsFljOPfP11XyG2 net::ERR_CONNECTION_TIMED_OUT
Error: Network Error
 at e.exports (bundle.js:30)
 at XMLHttpRequest.f.onerror (bundle.js:30)

I'm passing the Internal Load balancer's DNS name as an environment variable. Tested with console.log to see if the code is getting the correct DNS name and it does. When run locally i pass the hostname/port of each service separately.

I would really appreciate any inputs and insights on this and if you guys need more information please let me know, I'll update this question.

Thanks in advance!