<p>Suppose I own a domain name xxx.yyy.com, but I doesn't own any subdomain name (*.xxx.yyy.com) of it.</p>
<p>So I have to route each HTTP request to its corresponding service by <code>path</code>. For example, routing xxx.yyy.com/app1/ to service <code>app1</code> and xxx.yyy.com/app2/ to service <code>app2</code>.</p>
<p>I config my kubernestes resources as below:</p>
<pre class="lang-yaml prettyprint-override"><code>apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: ingress
  annotations:
    nginx.ingress.kubernetes.io/rewrite-target: /
    kubernetes.io/ingress.class: &quot;nginx&quot;
spec:
  rules:
    - host: xxx.yyy.com
      http:
        paths:
          - pathType: Prefix
            path: &quot;/app1&quot;
            backend:
              service:
                name: app1
                port:
                  number: 8000
          - pathType: Prefix
            path: &quot;/app2&quot;
            backend:
              service:
                name: app2
                port:
                  number: 8000
---

apiVersion: v1
kind: Service
metadata:
  name: app1
spec:
  selector:
    app: app1
  ports:
    - protocol: TCP
      port: 8000

---

apiVersion: v1
kind: Service
metadata:
  name: app2
spec:
  selector:
    app: app2
  ports:
    - protocol: TCP
      port: 8000

</code></pre>
<p>This works in most of the cases, except in front webapps.</p>
<p>In a front webapp's HTML and javascript code, we refer its assets (images, HTTP APIs) on the backend server by root path (&quot;/&quot;) , as if it is deployed on its own server.</p>
<p>For example in the javascript code of <code>app1</code> , we call <code>fetch('/api/getUsers')</code> instead of <code>fetch('/app1/api/getUsers')</code>, so the ingress failed to route <code>/api/getUsers</code> to service <code>app1</code>.</p>
<p>I know it can be solved easily by routing request by <code>host</code> not by <code>path</code>. But I don't have the permission to create subdomains.</p>
<p>So how can this scenario of front webapps be solved by routing by <code>path</code> ingress?</p>

benjaminchanming
<p>When the Web application is available to the Browser beneath a certain path, the front end requests need to target that path. You can achieve this by</p>
<ul>
<li>using only relative path names like <code>api/guestUsers</code> instead of <code>/api/guestUsers</code></li>
<li>or prefixing every query url with that path, like <code>/app1/img/logo.png</code>.</li>
</ul>
<p>The second way is supported by, for example by:</p>
<ul>
<li>Webpack: <a href="https://webpack.js.org/guides/public-path/" rel="nofollow noreferrer"><code>publicPath: &quot;/app1&quot;</code></a></li>
<li>React Router: <a href="https://reactrouter.com/docs/en/v6/api#browserrouter" rel="nofollow noreferrer"><code>&lt;BrowserRouter basename=&quot;/app1&quot;/&gt;</code></a></li>
<li>Angular: <a href="https://angular.io/guide/deployment#the-base-tag" rel="nofollow noreferrer"><code>&lt;base href=&quot;/app1&quot;/&gt;</code></a></li>
</ul>
<p>This setting could be dynamicly filled with a server variable or even <a href="https://webpack.js.org/guides/public-path/#automatic-publicpath" rel="nofollow noreferrer">set automatically</a> to the location of the entry point.</p>
