Azure 上的 Angular2 应用程序 "You do not have permission to view this directory or page"子路由

Question

我已经发布了 Angular2 应用程序并将其部署在 Azure Web Apps 上。如果我通过浏览到其根目录来启动该应用程序，则该应用程序可以正常工作: http://cafeserver.azurewebsites.net/Web/

但是，如果我直接浏览到应用程序中的子路由，例如: http://cafeserver.azurewebsites.net/Web/customers

它将抛出一个错误，指出“您无权查看此目录或页面”。

如何解决这个问题？

Answer 1

您需要更新 web.config 以将所有路由重定向到索引页面，以便 Angular 路由可以启动。我使用以下配置将 SPA 部署到 Azure:

<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="SPA">
                    <match url=".*" />
                    <conditions logicalGrouping="MatchAll">
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                        <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="/" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

请注意，我的设置会免除对包含 /api 的文件、目录和请求 URI 的请求，因为我将其保留用于后端 HTTP 路由。您可以根据您的豁免需求更新您的。