Repository: kubernetes
Issue: Cannot connect Backend Service from FrontEnd Service
Labels: kind/bug,needs-sig,needs-triage

### What happened?

I am developing a simple project called "TodoApp," which consists of a TodoApi project built with .NET and a WebApp project using ReactJS. However, I am unable to call the API from the WebApp in a browser. Interestingly, it works when I connect to the FrontEnd pod and use the `curl http://todoapp-api-service` command, which responds with 'hello world' from the server.


### What did you expect to happen?

I want  to call the API from the WebApp in a browser.

### How can we reproduce it (as minimally and precisely as possible)?

I setup my project:

1. Dockerfile
TodoApi Dockerfile:
```
# Use the official .NET SDK image to build the app
FROM mcr.microsoft.com/dotnet/sdk:9.0 AS build

# Set the working directory inside the container
WORKDIR /app

# Copy the csproj file and restore the dependencies
COPY ToDoApi.csproj ./
RUN dotnet restore

# Copy the rest of the application files
COPY . ./

# Build the application
RUN dotnet publish -c Release -o out

# Use the official .NET runtime image for the runtime environment
FROM mcr.microsoft.com/dotnet/aspnet:9.0 AS base

# Set the working directory for the runtime container
WORKDIR /app

# Expose port 80 for the app to listen to
EXPOSE 80

# Copy the published files from the build image
COPY --from=build /app/out .

# Define the entry point to run the app
ENTRYPOINT ["dotnet", "ToDoApi.dll"]
```

WebApi Dockerfile:
```
# Step 1: Use an official Node.js image as a base image
FROM node:16 AS build

# Step 2: Set the working directory inside the container
WORKDIR /app

# Step 3: Copy the package.json and package-lock.json (or yarn.lock)
COPY package*.json ./

# Step 4: Install the dependencies
RUN npm install

# Step 5: Copy the rest of the app's source code into the container
COPY . .

# Step 6: Build the React app
RUN npm run build

# Step 7: Use an official Nginx image to serve the build files
FROM nginx:alpine

# Step 8: Copy the build output from the first stage into the Nginx container
COPY --from=build /app/build /usr/share/nginx/html

# Step 9: Expose the port that Nginx will run on
EXPOSE 80

# Step 10: Start Nginx server
CMD ["nginx", "-g", "daemon off;"]
```

2. Deployment file yaml
```

apiVersion: apps/v1
kind: Deployment
metadata:
  name: todoapp-api-deployment
  labels:
    app: todoapp-api-label
spec:
  replicas: 1
  selector: 
    matchLabels:
      app: todoapp-api-label
  template:
    metadata:
      labels:
        app: todoapp-api-label
    spec:
      containers:
      - name: todoapp-api-container
        image: mrstevebang/todoapp-api:1.0.8
        ports:
        - containerPort: 80
        env:
        - name: ASPNETCORE_ENVIRONMENT
          value: "Development"  # Set the environment to Development

---
apiVersion: v1
kind: Service
metadata:
  name: todoapp-api-service
spec:
  selector:
    app: todoapp-api-label
  ports:
    - protocol: TCP
      port: 80
      targetPort: 80

---
apiVersion: apps/v1
kind: Deployment
metadata:
  name: todoapp-webapp-deployment
  labels:
    app: todoapp-webapp-label
spec:
  replicas: 1
  selector:
    matchLabels:
      app: todoapp-webapp-label
  template:
    metadata:
      labels:
        app: todoapp-webapp-label
    spec:
      containers:
      - name: todoapp-webapp-container
        image: mrstevebang/todoapp-webapp:1.0.13
        ports:
        - containerPort: 80
---
apiVersion: v1
kind: Service
metadata:
  name: todoapp-webapp-service
spec:
  selector:
    app: todoapp-webapp-label
  type: LoadBalancer
  ports:
    - protocol: TCP
      port: 80
      targetPort: 80
      nodePort: 30090

```

3. My code for connect api
```
import axios from 'axios';

const API_BASE_URL ='http://todoapp-api-service';

export const getTodos = () => axios.get(`${API_BASE_URL}/api/todos`);
export const createTodo = (todo) => axios.post(`${API_BASE_URL}/api/todos`, todo);
export const markCompleted = (id) => axios.post(`${API_BASE_URL}/api/todos/${id}/completed`);
export const deleteTodo = (id) => axios.delete(`${API_BASE_URL}/api/todos/${id}`);
```

### Anything else we need to know?

_No response_

### Kubernetes version

<details>

```console
$ kubectl version
Client Version: v1.32.0
Kustomize Version: v5.5.0
Server Version: v1.30.6
```

</details>


### Cloud provider

<details>
Minikube
</details>


### OS version

<details>

```console
# On Linux:
$ cat /etc/os-release
# paste output here
$ uname -a
# paste output here

# On Windows:
C:\> wmic os get Caption, Version, BuildNumber, OSArchitecture
# paste output here
```

</details>


### Install tools

<details>

</details>


### Container runtime (CRI) and version (if applicable)

<details>

</details>


### Related plugins (CNI, CSI, ...) and versions (if applicable)

<details>

</details>