AWS re:Post을(를) 사용하면 다음에 동의하게 됩니다. AWS re:Post 이용 약관
AWS re:Postre:Post

s3 static website not returning custom error.html

0

I've set up a React+Cloudfront+S3 SPA. Cloudfront has an OAC and the S3 bucket policy only allows CF to access the contents of the bucket. All public access is blocked. The bucket is configured for static website enabled. There is an index.html and error.html configured and those resources exist in the bucket with those names.

Bucket Policy

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AllowCloudFrontServicePrincipalReadOnly",
            "Effect": "Allow",
            "Principal": {
                "Service": "cloudfront.amazonaws.com"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::cik-front-end/*",
            "Condition": {
                "StringEquals": {
                    "AWS:SourceArn": "arn:aws:cloudfront::339712767340:distribution/EQDQLH88I63IN"
                }
            }
        }
    ]
}

Problem

All of this works. I can visit my CF url and see the react application. However, if I attempt to access some non-existent resource in the bucket (for example https://xyz.cloudfront.net/foo, I get the following error:


<Error>
  <Code>AccessDenied</Code>
  <Message>Access Denied</Message>
  <RequestId>VZEPZ2TPB5HX0W2V</RequestId>
  <HostId>2MmWdKGa13rUK0YTsQ+5GJPJnEgzJNvuLV+qL0Soc/taJpMaV4yd2+gVdvfIa5cjVtiZwNgUXDg=</HostId>
</Error>

Why is this not returning my error.html, as configured for the S3 bucket?

주제
스토리지네트워킹 및 콘텐츠 전송
태그
아마존 심플 스토리지 서비스아마존 CloudFront
언어
English
dboardman
질문됨 한 달 전406회 조회
1개 답변
2

Hello.

Have you configured custom error responses in CloudFront?
By setting a custom error response, you can display a custom error page when the corresponding error occurs.
https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/GeneratingCustomErrorResponses.html

"AccessDenied" will probably become "404 NotFound" if you allow the "s3:ListBucket" action in the S3 bucket policy.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AllowCloudFrontServicePrincipalReadOnly",
            "Effect": "Allow",
            "Principal": {
                "Service": "cloudfront.amazonaws.com"
            },
            "Action": ["s3:GetObject", "s3:ListBucket"],
            "Resource": ["arn:aws:s3:::cik-front-end/*", "arn:aws:s3:::cik-front-end"],
            "Condition": {
                "StringEquals": {
                    "AWS:SourceArn": "arn:aws:cloudfront::339712767340:distribution/EQDQLH88I63IN"
                }
            }
        }
    ]
}
profile picture
전문가
Riku_Kobayashi
답변함 한 달 전
profile pictureAWS
전문가
Didier_Durand
검토됨 한 달 전
  • dboardman
    한 달 전

    You need ListBucket access in addition to the documentation you provided on CloudFront custom errors?

  • dboardman
    한 달 전

    Looks like that doesn't quite work. The error becomes:

    <Error>
<Code>NoSuchKey</Code>
<Message>The specified key does not exist.</Message>
<Key>foo</Key>
<RequestId>PPDBMSCG5KP4EGF2</RequestId>
<HostId>
IUQVZ3dCYwqDSeKKPWTbes+QDgezcm5SAX5SItpGx2Nc8NIgBF+2LsA9NH8NqMC4UgXeAnwaLlw=
</HostId>
</Error>
  • Osvaldo Marte 전문가
    한 달 전

    Have you set a custom error response? Because if you didn't you will continue getting that default error.

  • dboardman
    한 달 전

    @osvaldo yes. I have:

    1. changed the bucket policy to reflect this answer's suggestion
    2. updated the cloudfront custom error policy for 404 and 403
    3. used my /error.html file and the custom response

    None of these actually show that html document. It simply changed the error to the NoSuchKey (posted above).

    EDIT: I tried again a few moments later and it works. I guess it was cached.

  • Osvaldo Marte 전문가
    한 달 전

    can you confirm that the error.html file is located at the root of your S3 bucket? You need to specify the correct path to the error.html file relative to the root of the S3 bucket.

로그인하지 않았습니다. 로그인해야 답변을 게시할 수 있습니다.

좋은 답변은 질문에 명확하게 답하고 건설적인 피드백을 제공하며 질문자의 전문적인 성장을 장려합니다.

질문 답변하기에 대한 가이드라인

관련 콘텐츠