Blocked by CORS Policy - S3 Bucket Access from Django App

Question

I am having an issue with my application accessing the font files in my S3 bucket.

Here is my CORS Policy on the S3 bucket:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
  <CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
    <ExposeHeader>ETag</ExposeHeader>
  </CORSRule>
</CORSConfiguration>

But in the console when accessing my website I am getting the following:

has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

Answer 1

I eventually configured a CloudFront distribution with whitelisted Access-Control-Allow-Origin , with the origin as S3, and configured nginx to include the right headers.

The Origin request header indicates where a fetch originates from. It doesn't include any path information, but only the server name (eg https://www.example.com ). See https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Origin for details.

Here we set the value that is included in the Access-Control-Allow-Origin response header. If the origin is one of our known hosts--served via HTTP or HTTPS--we allow for CORS. Otherwise, we set the "null" value, disallowing CORS.

map $http_host $cors_origin {
default "null";
  "~*^\.example\.com$" "$http_x_forwarded_proto://$http_host";
}