{"id":822,"date":"2021-02-02T14:35:58","date_gmt":"2021-02-02T06:35:58","guid":{"rendered":"https:\/\/vinta.ws\/code\/?p=822"},"modified":"2026-02-18T01:20:35","modified_gmt":"2026-02-17T17:20:35","slug":"fix-no-access-control-allow-origin-header-for-s3-and-cloudfront","status":"publish","type":"post","link":"https:\/\/vinta.ws\/code\/fix-no-access-control-allow-origin-header-for-s3-and-cloudfront.html","title":{"rendered":"Fix \"No Access-Control-Allow-Origin header\" for S3 and CloudFront"},"content":{"rendered":"<p>To avoid the error &quot;No 'Access-Control-Allow-Origin' header is present on the requested resource&quot;:<\/p>\n<ul>\n<li>Enable CORS on your S3 bucket<\/li>\n<li>Forward the appropriate headers on your CloudFront distribution <\/li>\n<\/ul>\n<h2>Enable CORS on S3 Bucket<\/h2>\n<p>In S3 -&gt; [your bucket] -&gt; Permissions -&gt; Cross-origin resource sharing (CORS):<\/p>\n<pre class=\"line-numbers\"><code class=\"language-json\">[\n    {\n        \"AllowedHeaders\": [\n            \"*\"\n        ],\n        \"AllowedMethods\": [\n            \"GET\"\n        ],\n        \"AllowedOrigins\": [\n            \"*\"\n        ],\n        \"ExposeHeaders\": []\n    }\n]<\/code><\/pre>\n<p>ref:<br \/>\n<a href=\"https:\/\/docs.aws.amazon.com\/AmazonS3\/latest\/userguide\/cors.html\">https:\/\/docs.aws.amazon.com\/AmazonS3\/latest\/userguide\/cors.html<\/a><br \/>\n<a href=\"https:\/\/docs.aws.amazon.com\/AmazonS3\/latest\/userguide\/ManageCorsUsing.html\">https:\/\/docs.aws.amazon.com\/AmazonS3\/latest\/userguide\/ManageCorsUsing.html<\/a><\/p>\n<h2>Configure Behaviors on CloudFront Distribution<\/h2>\n<p>In CloudFront -&gt; [your distribution] -&gt; Behaviors -&gt; Create Behavior:<\/p>\n<ul>\n<li>Path Pattern: *<\/li>\n<li>Allowed HTTP Methods: GET, HEAD, OPTIONS<\/li>\n<li>Cached HTTP Methods: +OPTIONS<\/li>\n<li>Origin Request Policy: Managed-CORS-S3Origin\n<ul>\n<li>This policy actually whitelists the following headers:\n<ul>\n<li><code>Access-Control-Request-Headers<\/code><\/li>\n<li><code>Access-Control-Request-Method<\/code><\/li>\n<li><code>Origin<\/code><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>ref:<br \/>\n<a href=\"https:\/\/aws.amazon.com\/premiumsupport\/knowledge-center\/no-access-control-allow-origin-error\/\">https:\/\/aws.amazon.com\/premiumsupport\/knowledge-center\/no-access-control-allow-origin-error\/<\/a><\/p>\n<p>Validate it's working:<\/p>\n<pre class=\"line-numbers\"><code class=\"language-js\">fetch(\"https:\/\/metadata.perp.exchange\/config.production.json\")\n.then((res) =&gt; res.json())\n.then((out) =&gt; { console.log(out) })\n.catch((err) =&gt; { throw err });<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>To avoid the error \"No 'Access-Control-Allow-Origin' header is present on the requested resource\"<\/p>\n","protected":false},"author":1,"featured_media":825,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[38,116],"tags":[16,135,17],"class_list":["post-822","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-about-devops","category-about-web-development","tag-amazon-web-services","tag-aws-cloudfront","tag-aws-s3"],"_links":{"self":[{"href":"https:\/\/vinta.ws\/code\/wp-json\/wp\/v2\/posts\/822","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vinta.ws\/code\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vinta.ws\/code\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vinta.ws\/code\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vinta.ws\/code\/wp-json\/wp\/v2\/comments?post=822"}],"version-history":[{"count":0,"href":"https:\/\/vinta.ws\/code\/wp-json\/wp\/v2\/posts\/822\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/vinta.ws\/code\/wp-json\/wp\/v2\/media\/825"}],"wp:attachment":[{"href":"https:\/\/vinta.ws\/code\/wp-json\/wp\/v2\/media?parent=822"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vinta.ws\/code\/wp-json\/wp\/v2\/categories?post=822"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vinta.ws\/code\/wp-json\/wp\/v2\/tags?post=822"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}