Azure托管Angular应用无法通过带路径URL访问问题求助

这种问题本质是Angular单页应用(SPA)的路由特性和Azure托管服务的默认行为不匹配导致的，以下是几个必查的解决步骤：

• 确认Angular构建的base href配置
  构建应用时必须指定正确的子路径作为base href，否则Angular路由无法正确解析深层路径。执行构建命令时加上参数：
  ng build --prod --base-href "/myapp/"
  或者在angular.json的projects -> your-app -> architect -> build -> options里配置"baseHref": "/myapp/"，再执行构建。

• 配置Azure静态网站的错误文档
  如果是用Azure静态网站托管（Storage Account）：

  1. 进入存储账户的“静态网站”设置
  2. 将“错误文档路径”设置为/myapp/index.html（注意要包含子路径）
  3. 保存设置后，Azure会在访问不存在的路径时返回index.html，让Angular路由接管处理。

• 添加URL重写规则（适用于Azure App Service）
  如果是部署在Azure App Service（Windows环境），需要在项目根目录添加web.config文件，内容如下：

  <?xml version="1.0" encoding="UTF-8"?>
  <configuration>
    <system.webServer>
      <rewrite>
        <rules>
          <rule name="Angular Routes" stopProcessing="true">
            <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="^/(myapp)" negate="false" />
            </conditions>
            <action type="Rewrite" url="/myapp/index.html" />
          </rule>
        </rules>
      </rewrite>
    </system.webServer>
  </configuration>
  

  这个规则会将所有针对/myapp下的非文件/非目录请求重写到/myapp/index.html，确保Angular路由能正确处理。

• 检查Azure CDN/Front Door的重定向规则
  如果使用了CDN或Front Door加速，检查是否存在错误的重定向规则，比如把深层路径强制跳转到根域名。确保所有指向/myapp/*的请求都被正确转发到托管源的对应路径。

内容的提问来源于stack exchange，提问作者Sakén