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

Posted June 13, 2020 4k views
NginxDjangoReactDigitalOcean Spaces

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 CORSORIGINALLOW_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 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:

I also have CORS enabled on my DO Spaces.



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

Digital Ocean Spaces

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

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

Submit an Answer
1 answer

Try the answer provided by me on this question