CloudFront+S3部署多Angular SPA子路径跳转问题求助

1. 调整CloudFront行为的优先级与匹配规则 #

• 把/checkout*的行为移到主应用默认行为的上方（CloudFront按从上到下顺序匹配路径，上方规则优先级更高）。
• 将路径匹配模式改成/checkout/*，避免误匹配/checkoutpage这类无关路径，同时保证/checkout/payment这类子路由也能被正确识别。
• 该行为的缓存策略如果是自定义的，要确保不缓存路由相关响应，或者设置短TTL，防止旧缓存导致跳转异常。

2. 配置目标S3桶的静态网站托管 #

• 进入目标S3桶的「静态网站托管」设置，把索引文档设为index.html（Angular SPA的入口文件）。
• 关键操作：把错误文档也设为index.html，同时关闭桶的「重定向所有请求到另一个主机名」选项，避免S3自身的重定向逻辑覆盖CloudFront的路由。
• 检查桶权限：确保CloudFront的OAI（源访问身份）有权限读取桶内所有文件，防止因403错误触发主应用的跳转。

3. 修正Checkout Angular应用的Base Href #

• 构建Checkout应用时必须指定正确的基准路径：

  ng build --base-href "/checkout/"
  

• 要是已经构建完成，手动修改dist目录下的index.html，把<base href="/">改成<base href="/checkout/">，确保Angular路由能正确识别子路径。

4. 调整CloudFront的错误页面配置 #

• 在CloudFront分发的「错误页面」设置中，添加404和403错误的自定义响应：
  • HTTP错误代码：404、403
  • 响应页面路径：/index.html
  • HTTP响应代码：200
• 注意：如果两个行为对应不同源，需要确保Checkout行为的错误处理指向自身桶的index.html，部分CloudFront版本支持行为级的错误配置，可直接在对应行为里设置。

5. 排查主应用的路由拦截逻辑 #

• 检查主Angular应用的路由配置，要是有通配符路由（比如**）会把未匹配路径重定向到根路径，得确保它不会捕获/checkout/*开头的路径，或者在主路由里添加一条空路由跳过该路径：

  const routes: Routes = [
    // ...主应用其他路由
    { path: 'checkout', pathMatch: 'full', redirectTo: '' }, // 交给CloudFront处理，不进入主应用路由
    { path: '**', redirectTo: '/' }
  ];
  

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