'How to fix error No 'Access-Control-Allow-Origin' header is present on the requested resource when using S3 and Cloudfront of Amazon

When I config S3 and Cloudfront to secure my premium files, I have a problem with Cross-Origin from Cloudfront I have researched and found this link and follow that tutorial to fix my error, but it not working.

Below is my error and my configs:

Error from Web Browser

1. Cloudfront Behavior Config

Behavior 1

Behavior 2

2. S3 Cross-origin resource sharing (CORS) Config

S3 CORS Permissions

S3 Policy

I spent much time researching and fix that but can not, please help me to fix that or tell me which I'm wrong to configs?

Thank you so much.



Solution 1:[1]

The configuration looks correct.

Try invalidating your Cloudfront distribution's cache, wait for the invalidation to complete and access the files again.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 duyvh