<p>I have created an ASP.NET Core C# Kubernetes Microservice <em>(Named: 'DemoApi')</em> with an Angular Frontend app <em>(Named: 'DemoApp')</em>.</p>
<p>Despite the fact that it works when I run both containers through <code>Docker for Desktop</code> or <code>Docker Swarm Mode</code>, I seem to have some connectivity issues when I run through <code>Kubernetes on Docker Desktop</code>.</p>
<p>To clarify the issue, I can display both</p>
<ul>
<li>the front-end application at <code>http://localhost:30005</code></li>
<li>the back-end application at <code>http://localhost/demo</code></li>
</ul>
<p>but while running the pods using Kubernetes, the front-end application <strong>does not display the data it should get</strong> from the API back-end.</p>
<p>Despite my search, I could not find a similar problem to mine. What could be the problem? Any assistance would be greatly appreciated.</p>
<p><strong>The following is a short summary of the steps I took:</strong></p>
<ol>
<li><p>Defined the applications to read one from the other.</p>
<p>a. DemoApi:</p>
   <pre class="lang-cs prettyprint-override"><code>   public void ConfigureServices(IServiceCollection services)
   {

       services.AddControllers();
       services.AddCors(options =&gt;
       {
           options.AddPolicy(&quot;AllowAngularDevClient&quot;,
             builder =&gt;
             {
                 builder
                 .WithOrigins(&quot;http://localhost:4200&quot;)
                 .AllowAnyHeader()
                 .AllowAnyMethod();
             });
           options.AddPolicy(&quot;AllowAngularClient&quot;,
             builder =&gt;
             {
                 builder
                 .WithOrigins(&quot;http://localhost&quot;)
                 .AllowAnyHeader()
                 .AllowAnyMethod();
             });
       });
   }
</code></pre>
<p>b. DemoApp (under <code>app.component.ts</code>):</p>
 <pre class="lang-angular prettyprint-override"><code> export class AppComponent {
   title = 'DemoApp';
   response = &quot;No data loaded, yet&quot;;
   constructor(private http: HttpClient) 
   { 
     this.http.get('http://localhost/demo', {responseType: 'text'}).subscribe((response: any) =&gt; {
       console.log(response);
       this.response = response;     
     });
   }
</code></pre>
</li>
<li><p>Built the applications into an image</p>
<p>a. Built the ASP.NET Core C# using the default Visual Studio docker support (Using the solution explorer, Right-click the dockerfile &gt; <code>Build Docker Image</code>).</p>
<p>b. Created a <code>dockerfile</code> for the angular application as follow:</p>
 <pre class="lang-dockerfile prettyprint-override"><code> 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
</code></pre>
<p>then ran the command <code>docker build -t demoapp .</code></p>
</li>
</ol>
<p>✔️ Worked using Local Docker for Desktop</p>
<ul>
<li><code>docker run --name demoapi-container demoapi</code></li>
<li><code>docker run --name demoapp-container --publish 4200:80 demoapp</code></li>
</ul>
<p>✔️ Worked using Local Docker Swarm Mode</p>
<ul>
<li><code>docker service create --name demoapi-svc -p 80:80 demoapi</code></li>
<li><code>docker service create --name demoapp-svc -p 4200:80 demoapp</code></li>
</ul>
<p>❌ Did not work using Local Kubernetes for Docker Desktop</p>
<ul>
<li>DemoApi:
<pre class="lang-yaml prettyprint-override"><code>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
</code></pre>
</li>
<li>DemoApp:
<pre class="lang-yaml prettyprint-override"><code>  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
</code></pre>
</li>
</ul>
<hr />
<p><strong>EDIT:</strong> I have completely re-configured everything starting from scratch thanks to @darwinawardee's suggestion:</p>
<p>At my DemoApi app I've added to the controller:</p>
<pre class="lang-cs prettyprint-override"><code>options.AddPolicy(&quot;AllowAngularKubernetesClient&quot;,
builder =&gt;
{
    builder
    .WithOrigins(&quot;http://demoapp&quot;).WithOrigins(&quot;demoapp&quot;).WithOrigins(&quot;http://localhost:30005&quot;)
    .AllowAnyHeader()
    .AllowAnyMethod();
});

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    app.UseCors(&quot;AllowAngularKubernetesClient&quot;);
    [...]
}
</code></pre>
<p>At my DemoApp app I've added to <code>app.component.ts</code>:</p>
<pre class="lang-angular prettyprint-override"><code>constructor(private http: HttpClient) 
{ 
    this.http.get('http://demoapi/demo', {responseType: 'text'}).subscribe((response: any) =&gt; {
        console.log(response + &quot; -- from Kubernetes Cluster.&quot;);
        this.response = response;       
    });
}
</code></pre>
<p>and re-built the images.</p>
<p>I've done the same process, yet the DemoApp does not get the information from the DemoApi.</p>
<p>Here are the logs from the entire process:
<a href="https://i.stack.imgur.com/64GH7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/64GH7.png" alt="Kubernetes pods process and logs" /></a></p>
<p>This is the result of using native Chrome's Inspect &gt; Network tab:
<a href="https://i.stack.imgur.com/shrPH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/shrPH.png" alt="Chrome Network Debug" /></a></p>

Erelephant
<p>You will be facing a network routing issue.</p>
<p>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 <a href="https://kubernetes.io/docs/concepts/services-networking/dns-pod-service/" rel="nofollow noreferrer">internal DNS</a> 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.</p>
<p>So for the traffic to reach the DemoApi you'll the DemoApp to query http://DemoApi/demo rather than http://localhost/demo.</p>
