title: AWS CloudFront Issue for Custom Error File: AccessDenied Message
body: <p>This is my first post in Stackoverflow and I have tried to search for the answer to a problem I am currently having with CloudFront serving up static S3 website page, to be precise, custom 404 error page. Hope you can help me out :=))</p>
  
  <p>I am not using any code, simply using the AWS console as a POC. Here is the scenario:</p>
  
  <p>a) I have created two buckets. The names are (as an example): mybucket.com and www.mybucket.com.</p>
  
  <p>b) I have placed my static site (a very simple one) inside the mybucket.com and redirect www.mybucket.com to it.</p>
  
  <p>c) The content bucket (mybucket.com) has an index.html file, an image file. I have created a folder under the bucket (called error) and placed a custom error message file called 404error.html in it.</p>
  
  <p>d) The index.html file also calls a simple JavaScript code that loads the contents of another file (welcome.html) from another bucket (resource.mybucket.com). I have ensured that bucket is enabled for CORS and it is working.</p>
  
  <p>d) The bucket has a bucket policy that allows everyone access to the bucket and it's contents. The bucket polcy is shown below:</p>
  
  <pre><code>{
      "Id": "Policy1402570669260",
      "Statement": [
          {
              "Sid": "Stmt1402570667997",
              "Action": [
                  "s3:GetObject"
              ],
              "Effect": "Allow",
              "Resource": "arn:aws:s3:::mybucket.com/*",
              "Principal": {
                  "AWS": [
                      "*"
                  ]
              }
          }
      ]
  }
  </code></pre>
  
  <p>e) I have ensured the www.mybucket.com and resource.mybucket.com also has the same policy.</p>
  
  <p>f) mybucket.com has been configured for static website hosting and the error file for mybucket.com has been configured to be error/404error.html.</p>
  
  <p>c) If I access the site using the S3 URL (mybucket.com.s3-website-.amazonaws.com), and try to access a non-existent file (say myfile.html), it correctly shows the custom 404 error page.</p>
  
  <p>The problem arises when I try to access the page using the CloudFront distribution. I created a CloudFront distribution on the S3 bucket (mybucket.com) and here are the properties I set:</p>
  
  <p>a) Error Page:</p>
  
  <p>i) HTTP Error Code: 404-Not Found</p>
  
  <p>ii) Error Caching TTL: 300</p>
  
  <p>iii) Customize Error Response: Yes</p>
  
  <p>iv) Response Page Path: /error/404error.html</p>
  
  <p>v) HTTP Response Code: OK</p>
  
  <p>b) A separate cache behaviour was set as well:</p>
  
  <p>i) Path Pattern: /error/*</p>
  
  <p>ii) Restrict Viewer Access: No</p>
  
  <p>I am keeping it very simple and standard. I am not forwarding cookies or query strings or using any signed URLs etc.</p>
  
  <p>Once the distribution is created, when I try to access the site with CloudFront URL, the main page works fine. If I try to test with a non existent page, however, I am not served with the custom 404 error page that I configured. Instead, I get the following XML file in the browser (Chrome/FireFox -latest):</p>
  
  <pre><code>&lt;Error&gt;
      &lt;Code&gt;AccessDenied&lt;/Code&gt;
      &lt;Message&gt;Access Denied&lt;/Message&gt;
      &lt;RequestId&gt;EB4CA7EC05512320&lt;/RequestId&gt;
      &lt;HostId&gt;some-really-big-alphanumeric-id&lt;/HostId&gt;
  &lt;/Error&gt;
  </code></pre>
  
  <p>No clue is shown in the the Console when I try to inspect elements from the browser.</p>
  
  <p>Now I know this AccessDenied error has been reported and discussed before and I have tried what most suggest: giving full access to the bucket. I have ensured that (as you can see from the bucket policy above, access is open for anybody). I have also tried to ensure Origin Access ID has been given GetObject permission. I have also dropped and recreated the  CloudFront distribution and also deleted/re-uploaded the error folder and the 404error.html file within the folder. The error file is manually accessible from the CloudFront URL:</p>
  
  <p><a href="http://xxxxxxxx.cloudfront.net/error/404error.html" rel="noreferrer">http://xxxxxxxx.cloudfront.net/error/404error.html</a></p>
  
  <p>But it does not work if I try to access an arbitrary non-existent file:</p>
  
  <p><a href="http://xxxxxxxx.cloudfront.net/myfile.html" rel="noreferrer">http://xxxxxxxx.cloudfront.net/myfile.html</a></p>
  
  <p>Is there something I am missing here?</p>
  
  <p>I really appreciate your help.</p>
  
  <p>Regards</p>