使用Amplify部署Angular应用时刷新出现访问被拒绝问题，升级至Angular 11后重写转发规则失效求助

我之前在把Angular项目升级到11版本时，也碰到过一模一样的Amplify重写规则问题，大概率是你的正则表达式里的一个小疏漏，加上Angular 11构建输出的变化共同导致的，咱们一步步来排查修复：

1. 先修正重写规则里的正则错误 #

你当前的规则里藏着一个容易被忽略的空格问题：

[ { "source": "</^[^.]+$|\.(?! (css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$)([^.]+$)/>", "target": "/index.html", "status": "200", "condition": null } ]

注意看\.(?! (css|...)$)这段，?!后面多了一个空格。这个空格会让正则的负向预查逻辑变成匹配"点后面跟着空格+指定后缀"，但Angular输出的静态资源都是.css、.js这种没有空格的格式，所以这个预查永远不会生效——结果就是所有请求（包括JS、CSS这些关键静态资源）都会被转发到index.html，浏览器加载资源时拿到的却是HTML文件，自然会解析失败导致应用挂起。

把空格去掉，同时补充Angular 11可能新增的资源后缀（比如woff2、webp），修正后的规则应该是：

[ { "source": "</^[^.]+$|\\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|webp)$)([^.]+$)/>", "target": "/index.html", "status": "200", "condition": null } ]

2. 验证Angular 11的构建输出资源 #

Angular 11对构建优化做了不少调整，可能会生成一些旧版本没有的资源类型。你可以本地运行构建命令：

ng build --configuration production

然后查看dist目录下的所有文件后缀，把这些后缀都补充到重写规则的排除列表里，确保所有静态资源请求都不会被错误转发。

3. 重新部署并验证规则 #

在AWS Amplify控制台的部署设置 -> 重写和转发页面，替换成修正后的规则，然后触发一次重新部署。部署完成后，打开浏览器开发者工具（F12）的「网络」标签页：

• 确认JS、CSS、图片等静态资源的返回状态是200，且响应内容是正确的资源文件
• 确认路由页面（比如/dashboard这类无后缀的URL）返回的是index.html

4. 额外排查点 #

如果还是有问题，可以检查：

• Angular路由是否使用了默认的PathLocationStrategy：如果改成了HashLocationStrategy，重写规则可能不需要，但SPA通常用前者
• 查看Amplify的部署日志：在控制台的「部署历史」里，检查构建过程是否有报错，比如资源路径配置错误
• 清除浏览器缓存：有时候旧的规则缓存会导致问题，强制刷新（Ctrl+F5）试试

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