Using AWS CloudFront with S3 to server js and css files

Question

I have setup AWS CloudFront and S3 as it's origin.

I have made the files I want to access in the bucket public, but I am getting a 403 Forbidden error/Access denied XML when I try to access these files.

A link is simply:

http://dd9rhibbjdy7s.cloudfront.net/assets123/app.js

I have Googled everywhere but still can't find the solution.

Does any one have a clue how to get this working?

---

The exact response when browsing to it is:

<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>74E36027507DACD6</RequestId>
<HostId>
uUxkyTmpJbfxk1UJTf9bZmtkA/Vqq5O4eRruiG8zpC6uWn7tA1ffd5bnM4GcKD9Hp0BPKqKsBKQ=
</HostId>
</Error>

Answer 1

Add this bucket policy to your S3 Bucket, remember to change the bucket name.

{
  "Version":"2008-10-17",
  "Statement":[{
    "Sid":"AllowPublicRead",
        "Effect":"Allow",
      "Principal": {
            "AWS": "*"
         },
      "Action":["s3:GetObject"],
      "Resource":["arn:aws:s3:::YOUR-BUCKET-NAME/*"
      ]
    }
  ]
}

Answer 2

One of my collegues suggested I use the policy generator and came up with this:

{
    "Id": "Policy1439469599074",
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "Stmt1439469594186",
            "Action": [
                "s3:GetObject"
            ],
            "Effect": "Allow",
            "Resource": "arn:aws:s3:::assets123/*",
            "Principal": "*"
        }
    ]
}

Which has made it all work :)