Angular 8应用部署后Azure AD认证/auth-callback报404求助

我之前也踩过这个一模一样的坑——本地调试时登录流程丝滑顺畅，一部署到Azure就出回调404。其实根源很清晰：Angular是单页应用(SPA)，所有路由都是客户端层面处理的，但Azure App Service默认会把每个请求都当成服务器端路由去寻找对应的静态文件，自然找不到/auth-callback这个仅存在于Angular客户端的路由，直接返回404了。

下面是具体的解决步骤：

1. 添加服务器路由重写规则，让所有请求指向index.html #

这是最核心的一步，目的是让Azure App Service把所有非静态文件/目录的请求都转发到Angular的入口文件index.html，交给Angular的客户端路由处理。

针对Windows环境的Azure App Service（默认） #

在你的Angular项目的src目录下新建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" />
          </conditions>
          <action type="Rewrite" url="/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

然后修改angular.json文件，把web.config加入到assets数组中，确保构建时会把它复制到dist目录：

"assets": [
  "src/favicon.ico",
  "src/assets",
  "src/web.config"
]

针对Linux环境的Azure App Service（使用Apache） #

如果你的App Service是Linux环境，在项目根目录新建.htaccess文件，内容如下：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

同样把.htaccess加入到angular.json的assets数组中。

2. 验证Azure AD配置（确保已经正确设置） #

你已经配置了正确的重定向URI：

• https://my_app.azurewebsites.net/auth-callback
• http://localhost:4200/auth-callback
  隐式授予也勾选了ID tokens，注销URL设置正确，这部分没问题，只要路由重写生效，回调就能正常触发。

3. 部署后验证 #

重新构建并部署你的Angular应用到Azure App Service：

1. 执行ng build --prod生成生产包
2. 部署到Azure后，直接访问https://my_app.azurewebsites.net/auth-callback，此时应该会加载Angular应用而不是返回404
3. 再次测试Azure AD登录流程，应该就能正常完成认证回调了

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