<p>I have a back-end service deployed in Kubernetes (at <a href="http://purser.default.svc.cluster.local:3030" rel="nofollow noreferrer">http://purser.default.svc.cluster.local:3030</a>) and a front-end angular 6 application with <code>nginx.conf</code> as </p>

<pre><code>upstream purser {
  server purser.default.svc.cluster.local:3030;
}

server {
  listen 4200;

  location / {
   proxy_pass http://purser;
   root /usr/share/nginx/html/appDApp;
   index index.html index.htm;
   try_files $uri $uri/ /index.html =404;
  }
}
</code></pre>

<p>In angular code we are using <code>http.get('http://purser.default.svc.cluster.local:3030', {observe: 'body', responseType: 'json'})</code></p>

<p>Case1: With <code>proxy_pass</code> set in <code>nginx.conf</code> when we hit the ui service it redirects to back-end and gives <code>json</code> output directly from back-end.</p>

<p>Case2: Without <code>proxy_pass</code> when we hit front-end service it shows the UI but no data is coming from backend i.e, browser is not able understand <code>http://purser.default.svc.cluster.local:3030</code></p>

<p><a href="https://i.stack.imgur.com/WeKAz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WeKAz.png" alt="enter image description here"></a></p>

<p>Solved it using this <code>nginx.conf</code></p>

<pre><code>upstream purser {
  server purser.default.svc.cluster.local:3030;
}

server {
  listen 4200;

  location /api {
    proxy_pass http://purser;
  }

  location / {
    root /usr/share/nginx/html/purser;
    index index.html index.htm;
    try_files $uri $uri/ /index.html =404;
  }
} 
</code></pre>

<p>and calling backend from frontend using <code>BACKEND_URL = window.location.protocol + '//' + window.location.host + '/api/'</code></p>

<p><strong>Explanation:</strong>
Frontend when it requires data from backend calls itself at path <code>/api</code>, nginx finds this path and according to configuration forwards it to backend kubernetes service <code>purser.default.svc.cluster.local:3030</code> using <code>proxy_pass</code></p>
