CloudFront为S3静态网站加速时候的CORS配置

一、背景

CORS的全称是Cross-Origin Resource Sharing，是浏览器跨站访问的技术规范。在使用S3静态托管时候，如果网页中的调用使用了CORS，那么需要为S3和CloudFront增加对应策略，才可以正常加载内容。

需要注意的是，并非所有内容应用都需要CORS。例如在网页主站的HTML中，如果直接使用<img>标签，是不会触发CORS的策略的。而对于现今网页大量使用各种脚本的情况，脚本会访问其他域名下的资源、或者是主域名相同但是加载其他子域名下的资源，访问行为包括GET访问、POST提交内容等。这种行为在浏览器端会触发CORS跨站请求，并在访问资源所在服务时候自动包含对应的CORS请求。此外，针对POST等请求，浏览器还会自动向资源所在的服务器发起OPTIONS请求，确认源站可支持的访问方式。此时就需要正确的配置CORS。

CORS不需要在网页代码中增加额外配置，但是存放资源的服务器需要配置对应的CORS策略。对于本例中，使用S3做静态托管、使用CloudFront做加速，则必须要在S3上配置CORS策略，并在CloudFront上转发CORS索请求Header，才可以跑通跨站请求。

二、网页代码

编辑网页test.html，里边使用javascript加载位于另外二级域名网站上的图片。代码如下。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CORS演示</title>
</head>
<body>
    <h1>CORS演示</h1>
    <div id="image-container"></div>
    <script>
        const img = new Image();
        img.crossOrigin = 'anonymous';
        img.onload = function() {
            document.getElementById('image-container').appendChild(img);
            console.log('图片加载成功');
        };
        img.onerror = function() {
            console.error('图片加载失败 - 可能是CORS问题');
            document.getElementById('image-container').innerHTML = '<p style="color: red;">图片加载失败 - 请检查CORS配置</p>';
        };
        img.src = 'https://image.mydomain.com/image01.png';
    </script>
</body>
</html>

三、S3 CORS配置

在S3的管理控制台，查找并进入相应的存储桶，点击Permissions标签页，向下滚动页面，找到Cross-origin resource sharing (CORS)的配置。点击编辑按钮，然后输入如下策略：

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD"
        ],
        "AllowedOrigins": [
            "https://web.mydomain.com"
        ],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3600
    }
]

点击保存，配置成功。

上面配置的含义是，允许来自 https://web.mydomain.com 网站上的网页中的Javascript程序使用GET和HEAD方法访问当前S3 Bucket下的资源，允许携带任意Header，浏览器缓存CORS结果3600秒。以上规则要求，从CloudFront发给S3的Request Header必须与S3 CORS策略中配置的完全一样。因此这还需要CloudFront配置特定转发规则。

另外需要注意，S3因为是静态网站托管，因此AllowedMethods支持的方法仅包括GET、PUT、POST、DELETE、HEAD，这个列表中不需要填写OPTIONS方法。而实际浏览器发送OPTIONS请求时候，是可以获得正确的返回结果的。

四、CloudFront配置

在CloudFront的管理控制台，选择图片等资源所在的S3存储桶对应的CloudFront发布点，点击第四个标签页Behaviors，从下拉框中选择默认的Behavior，然后点击编辑按钮。如下截图。

在编辑访问行为的界面想，将页面向下滚动，从Origin Request policy - optional中选择CORS-S3Origin，在Response header policy - optional中选择SimpleCORS。如下截图。

以上配置是基于S3静态网站服务的配置，因此只选择CORS-S3Origin和SimpleCORS即可。保存后，等待CloudFront分发配置生效。

等待几分钟待CloudFront的配置同步到全球发布点完成后，使用浏览器访问网页，可看到图片加载成功。

五、参考文档

https://docs.aws.amazon.com/AmazonS3/latest/userguide/cors.html

最后修改于 2025-08-25