上传静态文件至AWS S3存储桶后CSS内URL无法生效问题求助

首先明确：net::ERR_ABORTED 403 (Forbidden)不属于CORS类错误，CORS错误会明确提示No 'Access-Control-Allow-Origin' header is present on the requested resource，你之前调整CORS规则没有效果，是因为问题核心是AWS侧的资源访问权限配置错误，而非跨域限制。以下是可落地的排查解决步骤：

1. 优先检查S3存储桶（或CloudFront）的资源权限配置 #

• 如果你将静态资源存放在S3上：
  • 检查CSS、字体、图片等静态资源是否设置了公开读权限，或存储桶策略是否允许匿名访问对应路径的静态资源，参考桶策略配置如下：

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::你的存储桶名称/*"
        }
    ]
}

• 检查存储桶的「阻止公共访问」配置，4个开关如果全部开启，即使配置了桶策略也会返回403
• 如果你使用CloudFront作为CDN分发资源：
  • 检查CloudFront源站访问配置，是否绑定了源站访问控制(OAC)，对应的OAC是否被授予了S3的s3:GetObject权限
  • 检查CDN缓存规则是否错误携带了S3不接受的请求头，导致权限校验失败
  • 检查是否开启了WAF规则，误拦截了静态资源的GET请求

2. 确认资源路径配置正确 #

• CSS中的相对路径是相对于CSS文件本身的存放路径，而非引用CSS的HTML文件路径，比如你的CSS文件存放在/css/main.css，那么@import url(fonts.css)实际请求的是/css/fonts.css，需要确认对应路径下确实存在目标资源
• 检查资源名称的大小写是否完全匹配，AWS S3默认大小写敏感，Paper.gif和paper.gif会被识别为两个不同的资源，路径不匹配部分场景下会返回403而非404，容易误导排查方向

3. 排查签名/鉴权相关问题 #

• 如果你没有配置公共访问，而是通过预签名URL访问资源：检查预签名URL的过期时间是否设置过短，或者签名生成时的资源路径、请求方法是否和实际请求一致，签名错误会返回403
• 检查IAM用户/角色的权限边界，是否存在更高层级的权限限制禁止了s3:GetObject操作

4. CORS规则补充配置（后续确实出现跨域报错时再调整） #

如果403问题解决后出现跨域类报错，再配置S3的CORS规则即可，参考配置如下：

<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>*</AllowedOrigin>
   <AllowedMethod>GET</AllowedMethod>
   <AllowedHeader>*</AllowedHeader>
 </CORSRule>
</CORSConfiguration>

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