Invalid Argument: X-Amz-Security-Token when my django-based website hosted by vercel tries to get static files from cloudflare r2
First of all: I have a R2 bucket on cloudflare that is public, allows any origins and any headers, and works completely fine.
I'm using django-storages to storage and retrieve static files from that bucket, it works completely fine with the collectstatic
command and is configured like so:
CLOUDFLARE_R2_CONFIG_OPTIONS = {
"bucket_name": os.getenv('AWS_STORAGE_BUCKET_NAME'),
"default_acl": "public-read",
"signature_version": "s3v4",
"endpoint_url": os.getenv('AWS_S3_ENDPOINT_URL'),
"access_key": os.getenv('AWS_S3_ACCESS_KEY_ID'),
"secret_key": os.getenv('AWS_S3_SECRET_ACCESS_KEY'),
}
STORAGES = {
"default": {
"BACKEND": "storages.backends.s3.S3Storage",
"OPTIONS": CLOUDFLARE_R2_CONFIG_OPTIONS,
},
"staticfiles": {
"BACKEND": "storages.backends.s3.S3Storage",
"OPTIONS": CLOUDFLARE_R2_CONFIG_OPTIONS,
},
}
All the env variables are correct both in my local file and in my Vercel project settings.
The problem is: When I try to get my static files running the server locally, I can get it without any issue. But when my hosted website tries to get it, it returns Invalid Argument: X-Amz-Security-Token
.
My console presents the following logs:
A resource is blocked by OpaqueResponseBlocking, please check browser console for details.
Loading failed for the <script> with source “https://0f69b46e85805ed2f43733e43b3c9d42.r2.cloudflarestorage.com/red-lily-art/static/teste.js?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=fc2577758bc2bd91c1e1022852b8e3cb%2F20250317%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20250317T130205Z&X-Amz-Expires=3600&X-Amz-SignedHeaders=host&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEO3%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaCXVzLWVhc3QtMSJGMEQCIFvc%2F5JClCQ8o%2FGX8RNXEpe0LMctOAwwo0qN6YdtYmwAAiAdQ1vNe2ZdGRCy4bwIfvTe8CFy%2ByM7ZFu1O%2BeXdmJd3CrVAwhGEAMaDDY5MzU2ODkzNTA0MSIMzXoCS2fBSfvwBKTXKrIDl2MbDq6bezh5eKOXhGJuszK20Yqy3PgXmFdu945fK2RY8qPAvmxgHGPIhr2gi4wz0e4lOYiWHDzptMCBM%2FdISRQW2Yl6J7UIpQ0m1tE9%2FKLrC30JOVj1uPOtDyNrxF5TMGAuzX6%2FPaj6rezUdIa2AzT7cf3v1w%2BrQg781axTRL07H02ZHcJteVyFWclCth%2FrLvWPgHLxU3jgOTTxkpVycib%2F%2BcA0QTrU58x2pedmC5JfMI10fekZS1ZjBWprA9bDN3csTw6cyo6TICcbTMqH9i5xu2xRDIt6yDr6GS0876VDITy57qC5AdXX71Cgd7YdmgEYSmWFTSEYklJfsnjzHMqX7KtahskM%2BjTyrfHhtJ85NEWXfuxfUdR0d5jaN72K%2B6qbsYbopUjty7CJyo%2FwgjS7BF4P66gQNFBALc9d1R%2F92B%2BPvvpyXiD5j58ZJ5oC65W%2BlOGW96QPTCwO9b5M0ppmmO7K887wq5uVmGqZPoy7dymflBOsiAiDYYNYdyTfskRus7utsEYr0UMldBqKkheBRthKTr%2FIMtgdDGFS7YPPcE99Gu%2B%2FvO1diPH3pHlw3iEwyrrgvgY6nwHHzJTW6CRoh3VBIOe6GsNTop8DsRliEZK4jyOvn%2Btzk%2BEAvSQyfnVI7TSJIDyw%2FcV1S5OZq%2Fw%2Fd6U%2Fnuvjiyxto%2FvYXVhKxJumc4TpEQ3XqlX11hckBvSngjB6EUGL%2FjVI%2BxpgWnNx7HmU4xSct2pnfoOa3fYj8HvhZ58hH2K8T3vdm1gQ%2FIesyfMgy8TIrwMiXlgf29RIQ2MsTE8f16U%3D&X-Amz-Signature=a33b4d6841de2678820682bd4337a2c04ddc65fcb09646cafe8804530df4d31d”.