<p>I have two ASP.NET Core apps. One is a Headless CMS (API), and the other one is a Razor Pages blog front-end (with a REST client that communicates with the Headless CMS/API).</p>

<p>I then have an Azure AKS cluster. In it I have an ingress resource with the following routes (as per the instructions from the following AKS docs: <a href="https://learn.microsoft.com/en-us/azure/aks/ingress-tls#create-an-ingress-route" rel="nofollow noreferrer">https://learn.microsoft.com/en-us/azure/aks/ingress-tls#create-an-ingress-route</a> ). Each route is mapped to each of the apps/services mentioned above:</p>

<pre class="lang-yaml prettyprint-override"><code>spec:
  rules:
  - host: mydomain.westeurope.cloudapp.azure.com
    http:
      paths:
      - backend:
          serviceName: headless-cms-svc
          servicePort: 80
        path: /
      - backend:
          serviceName: blog-svc
          servicePort: 80
        path: /blog
</code></pre>

<p>When I now navigate to the first route, <code>mydomain.westeurope.cloudapp.azure.com</code>, the headless CMS app works as expected but when I navigate to the second route , <code>mydomain.westeurope.cloudapp.azure.com/blog</code>, I get a bunch of 404:s because the blog apps root path is now relative to the <code>/blog</code> ingress route which in turn breaks all the resources (css, javascript, images etc) in the wwwroot folder.</p>

<p>How should I configure my ASP.NET Core blog app and/or my ingress object?</p>

<p>404:s</p>

<pre><code>https://mydomain.westeurope.cloudapp.azure.com/css/site.min.css?v=kHvJwvVAK1eJLN4w8xygUR3nbvlLmRwi5yr-OuAO90E

https://mydomain.westeurope.cloudapp.azure.com/images/banner1.svg

https://mydomain.westeurope.cloudapp.azure.com/images/banner2.svg

https://mydomain.westeurope.cloudapp.azure.com/js/site.min.js?v=47DEQpj8HBSa-_TImW-5JCeuQeRkm5NMpJWZG3hSuFU
</code></pre>

<p>If I add the URL segment <code>/blog</code> the resources get served properly.
<code>https://mydomain.westeurope.cloudapp.azure.com/blog/images/banner1.svg</code> &lt;- works</p>

<p>And here is a regular <code>img</code> tag in the <code>Index.cshtml</code> Razor page (from a default ASP.NET Core 2.1 Razor Pages web application). I haven't changed anything in the code.</p>

<pre><code>&lt;img src="~/images/banner1.svg" alt="ASP.NET" class="img-responsive" /&gt;
</code></pre>

<h2>Problem</h2>

<p>It seems that your proxy rewrites the path.</p>

<ul>
<li>Before proxy: /blog/images/banner1.png</li>
<li>After proxy: /images/banner1.png</li>
</ul>

<p>Asp generates absolute (host relative) links (path only, but starting with a slash "/"). That means, we have to tell the framework that it must prefix all URLs with "/blog".</p>

<h2>Solution</h2>

<p>Do this (for asp.net core 2.1) by inserting the following snipped in your Startup class:</p>

<pre><code>app.Use((context, next) =&gt;
{
    context.Request.PathBase = new PathString("/blog");
    return next();
});
</code></pre>

<p>Code sample from: <a href="https://learn.microsoft.com/en-us/aspnet/core/host-and-deploy/proxy-load-balancer?view=aspnetcore-2.1" rel="nofollow noreferrer">https://learn.microsoft.com/en-us/aspnet/core/host-and-deploy/proxy-load-balancer?view=aspnetcore-2.1</a></p>

<p>Insert this snipped before any other middleware in your Configure method.</p>

<p>You can test this on your local machine too. All generated links should be prefixed with "/blog" - so they will be broken on your dev machine.</p>

<h2>Use Configuration</h2>

<p>You will need to make it configurable e.g. like so:</p>

<pre><code>        var basePath = Configuration.GetSection("BASE_PATH").Value;
        if (basePath != null)
        {
            Console.WriteLine($"Using base path '{basePath}'");
            // app.Use().. goes here
        }
</code></pre>

<p>(Assuming you read configuration from env vars in your startup.)</p>

<p>… and provide this env var in your kubernetes depoyment:</p>

<pre><code>...
 containers:
  - name: myapp
    image: myappimage
    env:
      - name: BASE_PATH
        value: "/blog"
</code></pre>
