Html5 fetch from Amazon AWS s3 bucket error: No 'Access-Control-Allow-Origin' header is present on the requested resource

Viewed 906

In my app I am trying to fetch a file from my AWS S3 bucket using the fetch API:

const response = await fetch(baseUrl + url);

I am getting the following error:

Access to fetch at 'https://my-bucket.s3.amazonaws.com/uploads/044_IMH7kfc.m4a?AWSAccessKeyId=AKIAZB4Y4NZS&Signature=l6QNLV1iUj%2LerlUis%3D&Expires=1586648149' from origin 'http://localhost:8000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Here is my CORS configuration file from my AWS bucket:

<?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>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
    <ExposeHeader>Access-Control-Allow-Origin</ExposeHeader>
</CORSRule>
</CORSConfiguration>

Fetch API in my app says "No 'Access-Control-Allow-Origin' header is present on the requested resource", but "Access-Control-Allow-Origin" in the CORS configuration should add that header, no?

I tried all the solutions posted here to no avail: Allow Access-Control-Allow-Origin header using HTML5 fetch API

I also found the AWS troubleshooting page, but that was not helpful either: https://docs.aws.amazon.com/AmazonS3/latest/dev/cors-troubleshooting.html

What am I missing?

1 Answers

I guess problem is in format, because new S3 console allow JSON format only.

Good luck I hope that was helpful.

Related