如何配置CloudFront为不同源设置对应的自定义错误页面？

你的问题核心是当前CloudFront的全局错误响应配置把API路径的404也覆盖成了index.html，解决思路是通过拆分CloudFront行为，分别为API路径和前端路径配置不同的错误处理规则。具体步骤如下：

1. 创建API专属的CloudFront行为 #

首先，我们需要为/api/*路径单独设置一个行为，确保这类请求的错误响应不会被前端的index.html覆盖：

• 登录AWS控制台，进入你的CloudFront分发管理页面，切换到Behaviors标签页。
• 点击Create Behavior：
  • 在Path pattern中输入/api/*（注意优先级，这个行为要排在默认行为前面）。
  • 在Origin or Origin Group中选择指向EC2后端的源（确保和你之前配置的API转发源一致）。
  • 滚动到Custom Error Responses部分：
    • 找到403和404错误码，将Customize Error Response设置为No。这样CloudFront会直接透传后端返回的原生响应（包括你的JSON格式404），而不会替换成index.html。
  • 其他配置项：根据你的API需求调整，比如允许所有HTTP方法（GET/POST/PUT/DELETE等）、设置合适的缓存策略（API请求通常建议禁用缓存或设置极短的缓存时间，避免动态响应被缓存）、确保必要的请求头（如Authorization、Content-Type）被转发到后端。

2. 调整默认行为的错误响应（保留前端路径的处理） #

针对非API路径（也就是默认的*路径行为），保持你原来的配置即可：

• 在Behaviors列表中找到默认行为（Path pattern为*），点击Edit。
• 在Custom Error Responses部分，确保403和404的配置是：
  • Customize Error Response设置为Yes。
  • Response Page Path填写/index.html。
  • HTTP Response Code可以选择200 OK（让Angular路由正常接管）或者保留404 Not Found（部分场景下也能正常工作，取决于你的Angular路由配置）。
• 保存修改。

3. 调整行为优先级 #

CloudFront是按照行为列表从上到下的顺序匹配路径的，所以一定要让/api/*的行为排在默认行为（*）的前面：

• 在Behaviors标签页，点击Order列的上下箭头，将/api/*行为移到最上方，确保所有以/api/开头的请求优先匹配这个行为。

4. 测试验证 #

完成配置后，等待CloudFront分发更新（通常需要几分钟），然后测试两种场景：

• 访问非API无效路径，比如http://somedomain.com/invalid-path：应该返回Angular的index.html，由前端路由处理。
• 调用API无效路径，比如http://somedomian.com/api/v1/invalid-path：应该收到后端返回的原生JSON格式404响应。

额外注意事项 #

• 如果你的API需要传递特定的请求头或查询参数到后端，确保在API行为的Origin Request Policy中选择合适的策略（比如自定义策略，包含你需要的头信息）。
• 检查EC2后端的安全组和Web服务器（Nginx/Apache）配置，确保它能正确接收CloudFront转发的请求，并返回预期的JSON响应。

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