Using S3 and Django project: Imported javascript modules are not including the "X-Amz" parameters thus getting 403
On the HTML page I'm including a script with:
<script type="module" src="{% static 'home/js/country/country.detail.js' %}"></script>
That script loads just fine and then imports other modules:
// country.detail.js file
import FooConverter from "./foo.converter.js";
import Alert from "/static/app/alert.messenger.js";
import MESSAGES from "/static/app/messages.txt.js";
When the browser makes the request to fetch those other modules from the S3 bucket I get a 403 - Forbidden status code, because the browser is not including the "X-Amz" parameters:
This is the request when the browser is fetching the fee.converter.js script (this one load fine):
https://bucketname.s3.us-east-2.amazonaws.com/static/home/js/country/country.detail.js?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=creds%2F20230207%2Fus-east-2%2Fs3%2Faws4_request&X-Amz-Date=20230207T145100Z&X-Amz-Expires=3600&X-Amz-SignedHeaders=host&X-Amz-Signature=a5364797888bb0b7ce5ead84c656734dbd8b3093af43cf4ddc34a5734c28d743
This is the request when fetching alert.messenger.js (the response is 403, because it's missing the X-Amz parameters):
https://bucketname.s3.us-east-2.amazonaws.com/static/app/alert.messenger.js
How can I solve this?
django-storages==1.13.1
Django==3.2.6
This is the CORS configuration in the bucket:
{
"CORSRules": [
{
"ID": "allow-auth",
"AllowedHeaders": [
"Authorization"
],
"AllowedMethods": [
"GET"
],
"AllowedOrigins": [
"*"
],
"MaxAgeSeconds": 3000
},
{
"ID": "allow-GET-locahost",
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"HEAD",
"GET"
],
"AllowedOrigins": [
"http://localhost"
],
"ExposeHeaders": [
"ETag",
"x-amz-meta-custom-header"
]
}
]
}