部署到Azure Web App的Angular应用对接Identity Server4时signin-callback返回404如何解决

核心问题原因 #

Angular 属于单页应用（SPA），所有路由逻辑均在客户端侧实现，服务端不存在对应路由的物理资源/接口。当Identity Server直接跳转到signin-callback这类路由时，请求会先到达服务端，服务端匹配不到路径就会返回404错误，需要配置服务端URL重写规则，将所有非静态资源的请求全部转发到Angular入口文件index.html，交由客户端路由处理。

Azure App Service 配置方案 #

Windows宿主（默认IIS环境） #

1. 在Angular项目src目录下新建web.config文件，内容如下：

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Angular SPA 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="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

2. 打开项目根目录的angular.json，在projects -> 你的项目名 -> architect -> build -> options -> assets数组中新增"src/web.config"，确保打包时该文件会被输出到dist目录：

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

3. 重新打包项目并部署到Azure App Service即可。

Linux宿主 #

如果使用NGINX作为运行环境，在NGINX配置文件的location /块中添加如下规则：

try_files $uri $uri/ /index.html =404;

如果使用serve工具启动应用，在启动命令中添加--spa参数开启SPA路由支持：

npx serve -s dist/你的项目名称

GoDaddy主机配置方案 #

Apache环境 #

在站点根目录新建.htaccess文件，内容如下：

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

NGINX环境 #

和Azure Linux宿主的NGINX配置一致，添加try_files规则即可。

备选方案（无需修改服务端配置） #

如果无法修改服务端配置，可以将Angular的路由策略改为哈希路由，URL中会携带#标识，#后的路径不会发送到服务端，自然不会触发404错误。修改方法如下：

1. 在app.module.ts中导入依赖：

import { HashLocationStrategy, LocationStrategy } from '@angular/common';

2. 在@NgModule的providers数组中新增配置：

providers: [
  { provide: LocationStrategy, useClass: HashLocationStrategy }
]

注意：使用哈希路由后需要同步修改Identity Server中配置的回调地址，匹配带#的路径格式。

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