IIS Reverse Proxy on Subdirectory Breaks Root Directory

Question

I am running a HTML, single-page application on IIS 7.5. I am trying to set up a reverse proxy in a subdirectory so that i can make same-domain requests to my API.

So i want my site to behave like this

+ site/
| - index.html
| - app.js
| + api/ (reverse proxy to api server)

Unfortunately, I am missing something. While my reverse proxy rewrite rules seem to be working, my requests to index.html are not. I get 500 Internal Server Errors for anything that is outside the api/ rewrite rule.

Here is my web.config:

<rewrite>
    <outboundRules>
        <rule name="ReverseProxyOutboundRule1" preCondition="" enabled="true">
            <match filterByTags="A, Form, Img" pattern="^http(s)?://webserver/api/(.*)" />
            <action type="Rewrite" value="http{R:1}://apiserver/{R:2}" />
        </rule>
        <preConditions>
            <preCondition name="ResponseIsHtml1">
                <add input="{RESPONSE_CONTENT_TYPE}" pattern="^text/html" />
            </preCondition>
        </preConditions>
    </outboundRules>
    <rules>
        <rule name="ReverseProxyInboundRule1" enabled="true" stopProcessing="true">
            <match url="api/(.*)" />
            <action type="Rewrite" url="http://apiserver/{R:1}" />
        </rule>
    </rules>
</rewrite>

When i turn on request diagnostics, i see the error message "Outbound rewrite rules cannot be applied when the content of the HTTP response is encoded ("gzip")." Which leads me to believe my outbound rule is incorrectly matching requests to index.html. But i cannot figure out what the problem is.

What am i missing? Is there a flaw in my approach?

Many thanks.