Nuxt 3部署IIS遇静态文件无法加载，反向代理配置求助

问题 #

尝试在IIS上部署Nuxt 3应用，计划用反向代理把外部请求https://www.example.com转发到内部运行地址http://localhost:8080。配置了匹配所有请求(.*)的入站规则，重写URL为http://localhost:8080/{R:1}，配置代码如下：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="ReverseProxyInboundRule1" stopProcessing="true">
                    <match url="(.*)" />
                    <action type="Rewrite" url="http://localhost:8080/{R:1}" logRewrittenUrl="true" />
                </rule>
            </rules>
        </rewrite>
        <httpErrors existingResponse="PassThrough" />
    </system.webServer>
</configuration>

现在只有动态路由能正常访问，所有静态文件都加载失败，curl返回错误：curl: (92) HTTP/2 stream 0 was not closed cleanly: CANCEL (err 8)。

补充信息：

• 本地直接访问http://localhost:8080时应用完全正常；
• 新建的Nuxt应用也出现同样问题；
• 因为ES Modules兼容性问题没法用iisnode，报错：iisnode Error [ERR_REQUIRE_ESM]: require() of ES Module (...)index.mjs not supported.

解决方案 #

1. 禁用IIS默认静态文件处理 #

在web.config的system.webServer节点下添加以下配置，让所有请求都走反向代理，而不是IIS直接处理静态文件：

<staticContent>
    <clear />
</staticContent>

2. 调整反向代理规则并添加出站规则 #

修改rewrite节点，添加出站规则修正响应中的地址，同时避免压缩冲突：

<rewrite>
    <rules>
        <rule name="ReverseProxyInboundRule1" stopProcessing="true">
            <match url="(.*)" />
            <action type="Rewrite" url="http://localhost:8080/{R:1}" />
            <serverVariables>
                <set name="HTTP_ACCEPT_ENCODING" value="" />
            </serverVariables>
        </rule>
    </rules>
    <outboundRules>
        <!-- 替换页面中的本地地址为外部域名 -->
        <rule name="ReverseProxyOutboundRule1" preCondition="ResponseIsHtml1">
            <match filterByTags="A, Form, Img" pattern="^http(s)?://localhost:8080/(.*)" />
            <action type="Rewrite" value="http{R:1}://www.example.com/{R:2}" />
        </rule>
        <!-- 重定向时修正Location头部 -->
        <rule name="ChangeLocationHeader" preCondition="IsRedirect">
            <match serverVariable="RESPONSE_Location" pattern="^http(s)?://localhost:8080/(.*)" />
            <action type="Rewrite" value="http{R:1}://www.example.com/{R:2}" />
        </rule>
        <preConditions>
            <preCondition name="ResponseIsHtml1">
                <add input="{RESPONSE_CONTENT_TYPE}" pattern="^text/html" />
            </preCondition>
            <preCondition name="IsRedirect">
                <add input="{RESPONSE_STATUS}" pattern="3\d\d" />
            </preCondition>
        </preConditions>
    </outboundRules>
</rewrite>

3. 完整配置示例 #

最终的web.config如下：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <staticContent>
            <clear />
        </staticContent>
        <rewrite>
            <rules>
                <rule name="ReverseProxyInboundRule1" stopProcessing="true">
                    <match url="(.*)" />
                    <action type="Rewrite" url="http://localhost:8080/{R:1}" logRewrittenUrl="true" />
                    <serverVariables>
                        <set name="HTTP_ACCEPT_ENCODING" value="" />
                    </serverVariables>
                </rule>
            </rules>
            <outboundRules>
                <rule name="ReverseProxyOutboundRule1" preCondition="ResponseIsHtml1">
                    <match filterByTags="A, Form, Img" pattern="^http(s)?://localhost:8080/(.*)" />
                    <action type="Rewrite" value="http{R:1}://www.example.com/{R:2}" />
                </rule>
                <rule name="ChangeLocationHeader" preCondition="IsRedirect">
                    <match serverVariable="RESPONSE_Location" pattern="^http(s)?://localhost:8080/(.*)" />
                    <action type="Rewrite" value="http{R:1}://www.example.com/{R:2}" />
                </rule>
                <preConditions>
                    <preCondition name="ResponseIsHtml1">
                        <add input="{RESPONSE_CONTENT_TYPE}" pattern="^text/html" />
                    </preCondition>
                    <preCondition name="IsRedirect">
                        <add input="{RESPONSE_STATUS}" pattern="3\d\d" />
                    </preCondition>
                </preConditions>
            </outboundRules>
        </rewrite>
        <httpErrors existingResponse="PassThrough" />
    </system.webServer>
</configuration>

为什么这么做 #

• IIS默认会优先处理静态文件，不会把这类请求转发给Nuxt服务，清空staticContent后所有请求都会走反向代理；
• 出站规则用来把Nuxt响应里的localhost:8080地址替换成外部域名，避免前端请求错误的资源路径；
• 清空HTTP_ACCEPT_ENCODING是为了防止IIS和Nuxt之间的压缩机制冲突，导致静态文件传输异常。

内容的提问来源于stack exchange，提问作者pbotas