使用CloudFront OAI访问S3托管的React应用出现403问题咨询

问题原因拆解 #

• 首先明确架构基础属性：使用CloudFront OAI访问S3时，S3是作为REST API端点提供服务，而非S3静态网站托管端点，二者路由逻辑有本质差异。如果使用S3静态网站托管端点则可以配置全路径的默认索引文档，但该模式不支持OAI访问，无法限制仅CloudFront访问S3资源。
• 默认根对象的作用：CloudFront的默认根对象仅对根路径/的请求生效，配置index.html作为默认根对象后，当用户访问站点根路径时，CloudFront会自动向S3请求/index.html资源，避免直接请求S3根路径（该操作需要S3的s3:ListBucket权限，OAI配置通常不会开放该权限，因此会直接返回403）。
• 子路由403的触发逻辑：React这类SPA应用使用客户端路由，/login这类子路径对应的静态资源在S3中实际不存在。当CloudFront收到子路径请求时，会直接向S3请求对应路径的对象，S3找不到对应对象且当前身份无s3:ListBucket权限时，就会返回403 Forbidden而非404错误。
• 自定义403错误响应的生效逻辑：配置403错误响应指向/index.html后，CloudFront会拦截所有返回403的请求，返回index.html内容并通常设置为200状态码，React应用加载完成后会在客户端处理对应路由，因此所有路径都可以正常访问。即使不配置默认根对象，根路径请求返回的403也会被拦截返回/index.html，因此也能正常访问站点。

机制合理性说明 #

该表现完全是CloudFront和S3的正常工作机制，是三个官方设计特性的组合结果：

1. CloudFront默认根对象的设计就是仅作用于根路径，不会递归处理所有子路径的默认文档
2. S3 REST端点的权限设计：无s3:ListBucket权限时，访问不存在的对象会返回403，避免泄露存储桶内的文件存在性信息
3. 自定义错误响应是CloudFront提供的标准错误拦截能力，用于自定义错误返回内容

该配置也是SPA应用托管在CloudFront+S3 OAI架构下的标准最佳实践。

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