S3桶策略-字体不显示在网站上

Question

嗨，我正试图从s3上我的网站上获得数据，一切都很好，但字体不显示。这是我的策略

{
    "Version": "2008-10-17",
    "Id": "http referer policy example",
    "Statement": [
        {
            "Sid": "Allow get requests originated from 54.148.239.58",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::bucket/*",
            "Condition": {
                "StringLike": {
                    "aws:Referer": [
                        "https://s3-us-west-2.amazonaws.com/bucket/*",
                        "http://54.148.239.58/*"
                    ]
                }
            }
        }
    ]
}

输出:-http://54.148.239.58/s3_file_exit_ck1.php?link=663&页面= 4

我不知道我做错了什么。

如果我从策略中删除https://s3-us-west-2.amazonaws.com/bucket/* .svg文件将不显示。

但是这行不通，

@font-face {
    font-family: ZapfDingbatsStd_2b4;
    src: url("https://s3-us-west-2.amazonaws.com/htmlmanuals/663/fonts/ZapfDingbatsStd_2b.woff") format("woff");
}

请帮

Answer 1

根据我的web浏览器中的控制台，当我访问您的页面时，它触发了一个错误消息:

Font from origin 'https://s3-us-west-2.amazonaws.com'被跨域资源共享策略阻止加载:请求的资源上没有'Access-Control-Allow-Origin'标头。起源的http://54.148.x。因此不允许访问X '。

显示一个域(s3-us-west-2.amazonaws.com)的页面试图引用另一个域(54.148.x.x)的数据。这会在浏览器中触发跨域资源共享(CORS)检查。

您需要配置CORS规则以允许访问。

来自跨域资源共享(CORS)文档:

跨域资源共享(Cross-origin resource sharing, CORS)为加载在一个域中的客户端web应用程序定义了一种与不同域中的资源交互的方式。通过Amazon S3中的CORS支持，您可以使用Amazon S3构建丰富的客户端web应用程序，并且选择性地允许跨域访问到Amazon S3资源。

您需要在S3 bucket中添加一个策略，以允许54.148.x.x中的页面访问bucket资源。