I have an AWS S3 bucket with open permissions that look like this:
**[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET",
"PUT",
"POST",
"DELETE",
"HEAD"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": [
"ETag"
],
"MaxAgeSeconds": 3000
}**
I also have a IAM user/policy that looks like this:
**{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "AllowAllOrigins",
"Action": [
"s3:*"
],
"Effect": "Allow",
"Resource": [
"arn:aws:s3:::my-bucket/*",
]
},
{
"Effect": "Allow",
"Action": [
"s3:ListBucket",
"s3:GetObject",
"s3:PutObject",
"s3:DeleteObject"
],
"Resource": [
"arn:aws:s3:::my-bucket/*",
]
}
]
}**
I am struggline with an error related to CORS: http://localhost:3000 has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I upload my files via a pre-signed url, and also get my files with a pre-signed url. The issue is when I try and download them I get a CORS error most of the time. Rarely it will go through and let me download my files.
Here is the code that I am using to download the files:
const handleDownload = async () => {
const zip = new JSZip();
// Fetch each file and add it to the zip
for (const item of selectedItems) {
// item is the index and fileItems[item] is the pre-signed url
const response = await fetch(fileItems[item].url);
const blob = await response.blob();
const splitUrl = fileItems[item].url.split('?');
const fileNameFromUrl = splitUrl[0].split('/');
const filename = fileNameFromUrl[7];
zip.file(filename, blob);
}
// Generate the zip file and trigger download
zip.generateAsync({ type: 'blob' }).then((content) => {
saveAs(content, 'selected-files.zip');
});
};
I’ve tried pretty much everything to get the files to download without issue, every time.
Anyone know how I can remove this CORS roadblock?