AWS CloudFront缓存行为未正确路由到S3 images存储桶问题

问题原因 #

你配置的错误响应规则确实是导致你看到返回React页面的直接诱因，但核心问题是路径转发不匹配：

• 你配置的images/*缓存行为本身可以正常命中/images/test.png这类请求，但是CloudFront会把完整的请求路径/images/test.png原样转发到images存储桶。你将test.png存放在images桶的根目录，S3会去查找桶内images/test.png路径的对象，找不到就返回403（S3默认未开启列对象权限时，不存在的对象会返回403而非404），触发你配置的403错误响应规则，返回website桶的index.html，才会让你误以为请求没有命中images的缓存行为。
• CloudFront缓存行为的优先级规则是路径越具体优先级越高，images/*的优先级高于默认的*规则，只要路径匹配就会走images对应的缓存行为，你可以在CloudFront控制台的分布「行为」标签页确认images/*规则的优先级高于默认行为即可排除优先级问题。

验证方法 #

你可以暂时注释掉CDK中的errorResponses配置重新部署，再次访问/images/test.png如果返回403错误，即可确认请求已经命中images缓存行为，只是S3内找不到对应对象。

解决方案 #

方案一：调整S3文件结构 #

在images存储桶下创建images目录，将test.png上传到该目录下，使S3内的对象路径和CloudFront转发的路径匹配，即可正常返回图片。

方案二：配置路径重写 #

新增CloudFront Function，在viewer request阶段将/images/*的请求路径重写，去掉前缀/images/，比如将/images/test.png改写为/test.png后再转发到images存储桶，不需要调整S3的文件结构即可正常访问。

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