Issue with Configuring Reverse Proxy on IIS for Angular Applications

Question

I'm currently facing an issue configuring a reverse proxy on IIS for my Angular applications. I have multiple micro-front end Angular apps, with a host app published on IIS using the address http://192.168.1.104:8081 and a remote app published on http://192.168.1.104:8080. I've tried configuring a proxy on localhost, and it works fine using the following configuration:

proxy.config.json:
    {
      "/assets/nahal": {
        "target": "http://localhost:4202",
        "secure": false,
        "changeOrigin": true,
        "pathRewrite": {
          "^/fonts": "/assets/nahal/fonts"
        }
      }
    }

ng serve --proxy-config proxy.conf.json

However, when I try to replicate this configuration on IIS using a web.config file, I'm encountering issues with accessing the remote applications. Here's the web.config file I've attempted:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <proxy enabled="true" />
    <rewrite>
      <rules>
        <rule name="Reverse Proxy to remote app" stopProcessing="true">
          <match url="^assets/nahal/(.*)" />
          <action type="Rewrite" url="http://192.168.1.104:8080/{R:1}" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

The expected behavior is to access the remote app using a URL like http://192.168.1.104:8081/assets/nahal/img/nahal.png, but the image doesn't show up even though the request status is 200.

Could anyone provide guidance on how to correctly configure the reverse proxy on IIS for Angular applications? Any help would be greatly appreciated!

Answer 1

I found the solution myself! If anyone else encounters a similar issue, I've documented the steps in my GitHub repository: Angular Micro Frontend. Feel free to check it out for detailed instructions on how to correctly configure the reverse proxy on IIS for Angular applications. Hope it helps!