<p>My frontend is setup as:</p>
<pre><code>this.http.post&lt;any&gt;(`${environment.apiUrl}/auth/login`, {email, password})
</code></pre>
<p>Where <code>apiUrl: 'http://backend/api'</code></p>
<p>I built the frontend in a container and exposed it to a loadbalancer service and I am trying to hook it up through a ClusterIP service to a backend on port 3000.</p>
<p>Frontend YAML:</p>
<pre><code>apiVersion: v1
kind: Service
metadata:
  name: frontend
spec:
  selector:
    tier: frontend
  ports:
    - port: 80
      targetPort: 80
  type: LoadBalancer
---
apiVersion: apps/v1
kind: Deployment
metadata:
  name: frontend
spec:
  selector:
    matchLabels:
      tier: frontend
  replicas: 1
  template:
    metadata:
      labels:
        tier: frontend
    spec:
      containers:
      - name: frontend
        image: &lt;Image&gt;
        imagePullPolicy: Always
        ports:
        - containerPort: 80
</code></pre>
<p>Backend YAML:</p>
<pre><code>apiVersion: apps/v1
kind: Deployment
metadata:
  name: backend
spec:
  selector:
    matchLabels:
      app: app
      tier: backend
  replicas: 1
  template:
    metadata:
      labels:
        app: app
        tier: backend
    spec:
      containers:
      - name: frontend-container
        image: &lt;Image&gt;
        ports:
        - containerPort: 3000
---
apiVersion: v1
kind: Service
metadata:
  name: backend
spec:
  selector:
    app: app
    tier: backend
  ports:
  - protocol: TCP
    port: 80
    targetPort: 3000
</code></pre>
<p>As explained in the doc <a href="https://kubernetes.io/docs/tasks/access-application-cluster/connecting-frontend-backend/" rel="nofollow noreferrer">here</a>.</p>
<p>But it doesn't work when I try to access it from the browser, I receive Unknown Error!!</p>
<p><a href="https://i.stack.imgur.com/U1ddX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/U1ddX.png" alt="enter image description here" /></a></p>
<p><a href="https://i.stack.imgur.com/lj512.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lj512.png" alt="enter image description here" /></a></p>
<p>Here are screenshots from inside the frontend making sure it is able to reach the backend internally.</p>
<p><a href="https://i.stack.imgur.com/7vyji.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7vyji.png" alt="enter image description here" /></a></p>
<p>I don't understand where I went wrong here. I am thinking the apiUrl var set to http://backend is not being translated correctly because if I changed that to a loadbalancer IP and rebuilt the image, exposed the backend to a LB service instead of ClusterIP. It does work.</p>
<p>But obviously I don't want to expose my backend to a LB service.</p>
<p>Any idea?</p>

<p>Look at the following:</p>
<pre><code>outside world  | k8s cluster
               | 
Browser  --&gt;   | Nginx-pod --&gt; backend-pod
               |
               |
</code></pre>
<p>The url <code>http://backend/api</code> is only resolvable within the cluster, but your browser is in the outside world, so it does not know what this url is.</p>
<p>You ideally would use an <code>ingress</code> to manage routes to cluster pods.</p>
