S3托管静态网站搭配CloudFront时相对文件路径失效问题

你的文件结构：

• 根目录：index.html
• /bundle 目录：styles.css
• /broker 目录：submit.html

要让两个页面都能用统一的根路径引入CSS：

<link rel='stylesheet' href='/bundle/styles.css' />

问题出在S3+CloudFront的配置上，按以下步骤调整：

1. 修正S3静态网站托管配置 #

• 确保已开启S3存储桶的静态网站托管功能，不要直接通过S3对象URL访问页面（比如https://xxx.s3.amazonaws.com/broker/submit.html），必须使用S3静态网站的域名（比如https://xxx.s3-website-us-east-1.amazonaws.com）作为访问入口的基础。
• 确认存储桶权限配置正确：如果通过CloudFront分发，建议用Origin Access Control（OAC）限制仅CloudFront访问；若允许公开访问，需确保存储桶策略开放对应资源的读取权限。

2. 调整CloudFront分发配置 #

• 原点域名选择S3静态网站的域名（不是S3桶的REST API域名），这样CloudFront会按照S3静态网站的路径规则转发请求，根路径/bundle/styles.css会正确映射到S3桶里的bundle/styles.css对象。
• 检查分发的行为设置：路径模式设为*，确保请求根路径资源时，CloudFront能正确从S3拉取对应文件，无需额外的路径重写（除非有自定义路由需求）。
• 确保所有页面都通过CloudFront的分发域名访问（比如https://your-cloudfront-domain.com），而非直接访问S3域名。

3. 可选：添加base标签统一路径基准 #

如果上述配置后仍有问题，可以在两个HTML文件的<head>中添加<base href="/" />，强制所有路径引用都以网站根目录为基准，避免页面所在目录影响路径解析。

之前你用不同相对路径能生效，是因为./bundle是相对于当前页面所在目录的同级路径，../bundle是上级目录路径，但根路径的方式更简洁，核心是要让S3+CloudFront的组合正确识别根路径对应的资源位置。

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