Search code examples
amazon-web-servicesamazon-s3corsamazon-cloudfront

CloudFront has been blocked by CORS policy

I use axios to get a resource (md file) from my cdn (served by aws CloudFront).

I get this error message in the browser:

Access to XMLHttpRequest at 'https://next.cdn.example.com/foo/bar.md' from origin 'https://next.example.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource

My website is: https://next.example.com
My cdn: https://next.cdn.example.com

But in CloudFront I setup everything to support CORS (in the pictures).

What else can I do to solve this problem?

S3 enter image description here

enter image description here

CloudFront

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

Solution

  • I do believe you need to allow also OPTIONS request on your behavior setup of the CloudFront. OPTIONS request is sent prior to actual GET/POST request for CORS request, see https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Functional_overview for more details.