请求带S3源站的CloudFront时CORS预检请求失败求助

问题分析 #

你遇到的情况是：React应用向CloudFront（源站为S3）发起请求时，OPTIONS预检请求返回403 Forbidden，响应头显示x-cache: Error from cloudfront。尽管S3和CloudFront都配置了宽松的CORS规则，但问题依然存在，核心问题大概率出在CloudFront的行为配置、S3的静态网站设置或缓存策略上。

具体排查与修复步骤 #

1. 确保CloudFront行为允许OPTIONS方法

CloudFront默认不会自动允许OPTIONS请求，需手动配置：

• 进入CloudFront控制台，找到目标分发，切换到行为标签页
• 编辑对应资源的行为规则，在允许的HTTP方法中勾选OPTIONS（需包含业务所需方法，比如GET、HEAD）
• 保存配置后等待分发部署完成（通常需要10-15分钟）

2. 验证S3静态网站托管配置（若启用）

如果你的S3桶开启了静态网站托管，CloudFront的源站地址必须使用S3的静态网站域名（格式如bucket-name.s3-website-<region>.amazonaws.com），而非S3的REST API域名（bucket-name.s3.amazonaws.com）。REST API域名不会处理OPTIONS预检请求，会直接导致403。

3. 调整CloudFront缓存策略，避免错误缓存OPTIONS响应

错误的缓存策略可能导致预检请求被异常缓存，可通过以下方式处理：

• 为OPTIONS请求创建独立缓存策略：将缓存键设置为仅包含Origin、Access-Control-Request-Method、Access-Control-Request-Headers这些CORS相关请求头
• 或直接对OPTIONS请求设置不缓存：在行为的缓存设置中选择自定义缓存策略，将TTL设为0

4. 完善S3桶的CORS规则

你的S3 CORS规则中未明确允许OPTIONS方法，预检请求是OPTIONS类型，需补充配置：

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD",
            "OPTIONS"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "Access-Control-Allow-Origin"
        ]
    }
]

保存规则后，等待S3配置生效。

5. 清除CloudFront缓存

旧的缓存响应可能导致配置更新后问题依旧，手动清除缓存：

• 进入CloudFront控制台，选择目标分发，点击无效创建
• 输入/*作为无效路径，提交后等待缓存清除完成（通常数分钟）

6. 检查S3桶权限配置

确保CloudFront的访问身份（OAI或OAC）拥有S3桶的访问权限：

• 若使用OAI，检查桶策略是否允许该OAI执行s3:GetObject和s3:ListBucket（按需）
• 确保没有拒绝OPTIONS请求的权限规则存在

内容的提问来源于stack exchange，提问作者craig-nerd