Kubernetes on Docker Desktop - local connectivity issue using a service between two pods - kubernetes

Question

I have created an ASP.NET Core C# Kubernetes Microservice (Named: 'DemoApi') with an Angular Frontend app (Named: 'DemoApp').
Despite the fact that it works when I run both containers through Docker for Desktop or Docker Swarm Mode, I seem to have some connectivity issues when I run through Kubernetes on Docker Desktop.
To clarify the issue, I can display both
the front-end application at http://localhost:30005
the back-end application at http://localhost/demo
but while running the pods using Kubernetes, the front-end application does not display the data it should get from the API back-end.
Despite my search, I could not find a similar problem to mine. What could be the problem? Any assistance would be greatly appreciated.
The following is a short summary of the steps I took:
Defined the applications to read one from the other.
a. DemoApi:
public void ConfigureServices(IServiceCollection services)
{
services.AddControllers();
services.AddCors(options =>
{
options.AddPolicy("AllowAngularDevClient",
builder =>
{
builder
.WithOrigins("http://localhost:4200")
.AllowAnyHeader()
.AllowAnyMethod();
});
options.AddPolicy("AllowAngularClient",
builder =>
{
builder
.WithOrigins("http://localhost")
.AllowAnyHeader()
.AllowAnyMethod();
});
});
}
b. DemoApp (under app.component.ts):
export class AppComponent {
title = 'DemoApp';
response = "No data loaded, yet";
constructor(private http: HttpClient)
{
this.http.get('http://localhost/demo', {responseType: 'text'}).subscribe((response: any) => {
console.log(response);
this.response = response;
});
}
Built the applications into an image
a. Built the ASP.NET Core C# using the default Visual Studio docker support (Using the solution explorer, Right-click the dockerfile > Build Docker Image).
b. Created a dockerfile for the angular application as follow:
FROM node:14-alpine as build-step
RUN mkdir -p /app
WORKDIR /app
COPY package.json /app
RUN npm install
COPY . /app
RUN npm run build --prod
FROM nginx:1.21.0-alpine
COPY --from=build-step /app/dist/DemoApp /usr/share/nginx/html
then ran the command docker build -t demoapp .
✔️ Worked using Local Docker for Desktop
docker run --name demoapi-container demoapi
docker run --name demoapp-container --publish 4200:80 demoapp
✔️ Worked using Local Docker Swarm Mode
docker service create --name demoapi-svc -p 80:80 demoapi
docker service create --name demoapp-svc -p 4200:80 demoapp
❌ Did not work using Local Kubernetes for Docker Desktop
DemoApi:
apiVersion: v1
kind: Pod
metadata:
name: demo-api-pod
labels:
name: demo-api-pod
app: demo-api
spec:
containers:
- name: demo-api-container
image: demoapi:latest
imagePullPolicy: IfNotPresent
ports:
- containerPort: 80
---
apiVersion: v1
kind: Service
metadata:
name: demoapi
labels:
name: demo-api-svc
app: demo-api
spec:
type: LoadBalancer
ports:
- port: 80
targetPort: 80
selector:
name: demo-api-pod
app: demo-api
DemoApp:
apiVersion: v1
kind: Pod
metadata:
name: demo-angular-pod
labels:
name: demo-angular-pod
app: demo-angular
spec:
containers:
- name: demo-angular-container
image: demoapp:latest
imagePullPolicy: IfNotPresent
ports:
- containerPort: 80
---
apiVersion: v1
kind: Service
metadata:
name: demoapp
labels:
name: demo-angular-svc
app: demo-angular
spec:
type: NodePort
ports:
- port: 80
targetPort: 80
nodePort: 30005
selector:
name: demo-angular-pod
app: demo-angular
EDIT: I have completely re-configured everything starting from scratch thanks to #darwinawardee's suggestion:
At my DemoApi app I've added to the controller:
options.AddPolicy("AllowAngularKubernetesClient",
builder =>
{
builder
.WithOrigins("http://demoapp").WithOrigins("demoapp").WithOrigins("http://localhost:30005")
.AllowAnyHeader()
.AllowAnyMethod();
});
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
app.UseCors("AllowAngularKubernetesClient");
[...]
}
At my DemoApp app I've added to app.component.ts:
constructor(private http: HttpClient)
{
this.http.get('http://demoapi/demo', {responseType: 'text'}).subscribe((response: any) => {
console.log(response + " -- from Kubernetes Cluster.");
this.response = response;
});
}
and re-built the images.
I've done the same process, yet the DemoApp does not get the information from the DemoApi.
Here are the logs from the entire process:
This is the result of using native Chrome's Inspect > Network tab:

Answer 1

You will be facing a network routing issue.
In Kubernetes each deployment will run in a pod which is assigned it's own IP address, as is the associated service for each (which load balances traffic across pods). Kubernetes maintains an internal DNS for routing between services. A service can be reached by it's full route servicename.namespace.svc.cluster-domain.example or within the namespace simply via the servicename itself.
So for the traffic to reach the DemoApi you'll the DemoApp to query http://DemoApi/demo rather than http://localhost/demo.