We are using an Amazon s3 bucket to store our files. On the frontend side, we have to do this one:
fetch('https://some-bucket.s3.eu-central-1.amazonaws.com/some-bucket/4575/some-image.png');
On the amazon s3 bucket configuration, we added cors configuration:
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET",
"HEAD"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": [],
"MaxAgeSeconds": 3000
}
]
The main problem here header origin. In some cases browser set header origin in some cases not.
Here example when all okay:
GET /some-bucket/4016/Elephant_Large_PNG_Clipart-1047.png HTTP/1.1
Host: some-bucket.s3.eu-central-1.amazonaws.com
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="90", "Google Chrome";v="90"
Accept: application/json, text/plain, */*
sec-ch-ua-mobile: ?0
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.93 Safari/537.36
Origin: https://some-domain.com
Sec-Fetch-Site: cross-site
Sec-Fetch-Mode: cors
Sec-Fetch-Dest: empty
Referer: https://some-domain.com/
Accept-Encoding: gzip, deflate, br
Accept-Language: ru-RU,ru;q=0.9,en-US;q=0.8,en;q=0.7,uk;q=0.6
Here is a request which is failed because the origin header is missing.
GET /some-bucket/4608/469705261---Copy.jpeg HTTP/1.1
sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="90", "Google Chrome";v="90"
Accept: application/json, text/plain, /
Referer: https://some-domain.com/
sec-ch-ua-mobile: ?0
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.93 Safari/537.36
In the amazon docs, we could see - that origin header is required. No origin header, cors issue. Origin header send, cors works well.
We have one more important thing, we are using https://quasar.dev/ on frontend side.
We decided to create plain js without any frontend framework. Just for test. Simple html just with fetch. It works everywhere! It sent header origin.
We tested in: Firefox - always all okay in all cases. Chrome - issue exist.
At this point we are using workaround with nginx like a proxy server to amazon s3 bucket, but we would like to use s3 bucket directly.
I am confusing. Please share your thouths, or maybe we are missing something. I will be appreaseate. Thank you!
