How to solve CORS error when using DO Spaces, Django and react?

Hello, I’ve been dealing with this for the past week and can’t seem to find the root of the problem.

I have a Django API with DRF, corsheaders enabled with CORS_ORIGIN_ALLOW_ALL = True. I also have a React App on a different domain. I can make requests from my react app to my django API without any problem EXCEPT when I do a post request to upload a picture from my react app suddenly No ‘Access-Control-Allow-Origin’ error appears.

The strange thing is that when I serve my API through my local machine (localhost:8000) I suddenly get no errors, so only when serving my API in api.example.com I get the error when trying to post a picture.

For my files I use django-storages and Digital Ocean Spaces, for my api I’m using Ubuntu 18.04, nginx and gunicorn.I followed this guide to setup djnago in a DO bucket: https://www.digitalocean.com/community/tutorials/how-to-set-up-django-with-postgres-nginx-and-gunicorn-on-ubuntu-18-04.

I also have CORS enabled on my DO Spaces.

Django:

#settings.py
ALLOWED_HOSTS = ['*']
CORS_ORIGIN_ALLOW_ALL = True
INSTALLED_APPS = [
...
'storages',
'corsheaders',
...
]
MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware',
...
]

React

const postImagePlan = async (file: any, access: string) => {
//Creates new form data
let data = new FormData();
data.append("picture", file);
try {
const response = await axios.post(plansPictureUrl, data, {
headers: { Authorization: `JWT ${access}` },    
});
return response;  
} catch (error) {
return error;  
}};`

Digital Ocean Spaces https://preview.redd.it/49q45byt0p451.png?width=591&format=png&auto=webp&s=bd5eb8f99d17c2899cd40e0bef7b66e397fdbe15

Also, a common error is people not adding ‘/’ to the end of urls, I can confirm I am adding it.

Any info will help at this point. Thanks