Azure托管Angular 18应用/login路由访问异常求助

1. 修复Azure静态网站路由重写配置 #

Angular是单页应用（SPA），直接访问/login这类子路由时，Azure会默认查找对应物理文件（如login.html），找不到就会返回404错误。需要通过routes.json配置让所有请求重定向到index.html，由Angular路由处理：

• 在项目src目录下创建routes.json，内容如下：

{
  "routes": [
    {
      "route": "/*",
      "serve": "/index.html",
      "statusCode": 200
    }
  ]
}

• 修改angular.json，将该文件加入打包资源列表：

"assets": [
  "src/favicon.ico",
  "src/assets",
  "src/routes.json"
]

• 重新构建项目后重新部署到Azure。

2. 检查Azure Portal静态网站配置 #

登录Azure Portal进入你的静态网站资源：

• 进入「配置」页面，确认「默认文档」为index.html，「错误文档路径」设置为/index.html。
• 确认routes.json已上传至网站根目录（手动部署时需检查，自动部署管道会同步该文件）。

3. 验证登录链接的跳转方式 #

确保登录链接使用Angular的routerLink指令，而非原生<a href>：

<!-- 正确写法（由Angular路由处理跳转） -->
<a routerLink="/login">登录</a>

<!-- 错误写法（触发浏览器硬刷新，导致Azure直接请求/login路径） -->
<a href="/login">登录</a>

4. 清除缓存 #

• 用浏览器无痕模式访问/login，或手动清除浏览器缓存。
• 在Azure Portal静态网站的「概述」页面，点击「清除边缘缓存」按钮，刷新CDN缓存。

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