javascriptjqueryamazon-s3trumbowyg

Failed to load <resource>: No 'Access-Control-Allow-Origin' header is present on the requested resource


I'm getting this error in my console when I try to load my .svg icons from my S3 bucket:

Failed to load https://<my_bucket>.s3.amazonaws.com/static/js/Trumbowyg-master/dist/ui/icons.svg: 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'https://<my_site>.com' is therefore not allowed access.

Any idea how I can fix this?


Solution

    1. Go to your S3 console
    2. Click your bucket name
    3. Go to "Permissions"
    4. Go to "CORS Configuration"
    5. Configure your CORS rules, here you have an example with wildcard(*) origin - you can use your own origin and desired methods, and save changes.

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