<h2>Context</h2>
<p>I have a simple Kubernetes setup as follows:</p>
<pre><code>apiVersion: apps/v1
kind: Deployment
metadata:
  name: hello
  namespace: hello
  labels:
    app: hello
spec:
  replicas: 1
  selector:
    matchLabels:
      app: hello
  template:
    metadata:
      name: hello-app
      labels:
        app: hello
    spec:
      containers:
        - name: hello-frontend-app
          image: myrepo.frontend:latest
          env:
            - name: BACKEND_API
              value: &quot;http://localhost:8081&quot;
        - name: hello-backend-app
          image: myrepo.backend:latest
---
kind: Service
apiVersion: v1
metadata:
  name: hello-service
  namespace: hello
spec:
  type: ClusterIP
  selector:
    app: hello
  ports:
    - port: 80

---
kind: Ingress
apiVersion: extensions/v1beta1
metadata:
  name: hello-ingress
  namespace: hello
  annotations: ..etc
spec:
  rules:
    - host: hello.mydomain.com
      http:
        paths:
          - path: /
            backend:
              serviceName: hello-service
              servicePort: 80
  tls:
    - hosts:
        - hello.mydomain.com
      secretName: hello-tls
</code></pre>
<p><code>hello-frontend-app</code> is an Angular JS webservice that can be accessed from <code>hello.mydomain.com</code> while <code>hello-backend-app</code> is a server that connects to a database and exposes its contents to <code>hello-frontend-app</code> via REST.</p>
<p>Here is a stripped-down version of how the REST interface is defined in <code>hello-frontend-app</code></p>
<pre><code>import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { EnvService } from './env.service';

@Injectable({
  providedIn: 'root'
})
export class StuffService {
    httpHeaders = new HttpHeaders({
        'content-type': 'application/json',
        'Access-Control-Allow-Origin': &quot;*&quot;
      });

  constructor(private httpService: HttpClient, private env: EnvService) {    
  }

  getStuff(): Observable&lt;Stuff[]&gt; {
    return this.httpService.get&lt;StuffList&gt;(this.env.apiUrl + '/stuff', {headers: this.httpHeaders});
  }

}
</code></pre>
<h2>Problem</h2>
<p>The problem that I have appears to be <strong>two-fold</strong>. Both issues might be related but they may also be separate. I can get the above setup to work only if I change it as follows:</p>
<ol>
<li>Instead of launching the <code>hello-backend-app</code> in the same pod, I place it in its own pod and put it behind its own service (LoadBalancer) and then point <code>BACKEND_API</code> to the external ELB address. Note that pointing to the IP Address (or making the backend a ClusterIP rather than LoadBalancer) <strong>does not work</strong></li>
<li>Simultaneously, I must also change the Ingress to work without tls-authentication. Doing that in combination with 1. and then navigating to <code>http://my.domain.com</code> (instead of <code>https://my.domain.com</code>) is the only setup I've found where the <code>getStuff()</code> request works.</li>
</ol>
<p>So, it seems to be:</p>
<ol>
<li><code>getStuff()</code> doesn't like IP addresses like <code>http://localhost:8081</code> or <code>http:123.44.1.2:8081</code> and instead wants addresses like <code>aaaaaccccccxxxxxx1111122222.eu-central-1.elb.amazonaws.com</code></li>
<li><code>getStuff()</code> doesn't work if the origin is <code>https</code></li>
</ol>
<p>Note that if I log into the <code>hello-frontend-app</code> container I am able to manually perform all the curl requests work (<code>curl &quot;http://localhost:8081/stuff&quot;</code>, <code>curl &quot;http://123.44.1.2:8081:8080/stuff&quot;</code>, <code>curl &quot;aaaaaccccccxxxxxx1111122222.eu-central-1.elb.amazonaws.com:8081/stuff&quot;</code>) so there is no issue with the connectivity to the backed.</p>
<p>I assume that the problem lies with the headers, but do not know how to resolve it (I am a system architect rather than a web developer). I have tried setting <code>'Access-Control-Allow-Origin'</code> to null or to <a href="https://my.domain.com" rel="nofollow noreferrer">https://my.domain.com</a> but this does not seem to solve the problem.</p>

Karl
<p>So I guess the frontend works fine. You are having issues with the backend routing.</p>
<p>I suggest that create another deployment for the backend application. Create a Kube service type of &quot;ClusterIP&quot; , keep port and targetPort of service to &quot;8081&quot;</p>
<p>And then use path-based routing through another ingress config to forward backend service to frontend URL.</p>
<p>Ex. frontend app is on  <a href="https://my.domain.com/" rel="nofollow noreferrer">https://my.domain.com/</a>
and backend will be accessible on  <a href="https://my.domain.com/api/" rel="nofollow noreferrer">https://my.domain.com/api/</a></p>
<pre><code>apiVersion: extensions/v1beta1
kind: Ingress
metadata:
  name: backend-config
  annotations:
    kubernetes.io/ingress.class: nginx
    nginx.ingress.kubernetes.io/ssl-redirect: &quot;true&quot;
    nginx.ingress.kubernetes.io/rewrite-target: /$2
spec:
  tls:
  - hosts:
    - hello.mydomain.com
    secretName: hello-tls
  rules:
  - host: hello.mydomain.com
    http:
      paths:
      - backend:
          serviceName: backend-service
          servicePort: 8081
        path: /api/(/|$)(.*)
</code></pre>
