No 'Access-Control-Allow-Origin' header is present on the requested resource with Django digitalocean Spaces

You need to setup CORS at Digital ocean, not on your website. Check this: digitalocean.com/docs/spaces/how-to/cors

This is a pretty old question. But answering it cause someone may find it useful.

I have faced the same issue. First of all, if you are using DO (Digital Ocean) space you need to set the CORS header options to DO space, not in the django app.

You need to open the settings of DO space and go to CORS Configuration.

Then add Access-Control-Allow-Origin in the Allowed header section

Then give the Access Control Max Age value to 600 seconds, this means the browser will cache the CORS header info for 10 mins.

Finally don't forget to clear the cache from DO spcae's edge server if you are using CDN by clicking the purge cache button in settings otherwise you will waste a lot of time like me.

It's an old question nonetheless I came across this issue and spent sometime to fix because DOs docs are not complete. My 2 cents is ... configure CORS as mentioned by the DOs docs (https://www.digitalocean.com/docs/spaces/how-to/configure-cors/). Once it's done... go to Spaces settings and purge the cache. This is the missing step in the docs. Configuration won't take into affect until you purge the cache.

You must make sure :

• Setting cross-origin allow everything in configure Space, for instance :

  • Origins : *
  • Allowed Methods : GET, PUT
  • Advanced Options : Header: *

• In client need inject into header : 'x-amz-acl': 'public-read'

$.ajax({
    url: data.response.pre_sign_url,
    type: 'PUT',
    headers: {
      'x-amz-acl': 'public-read'
    },
    contentType: input.files[0].type,
    cache : false,
    processData: false,
    data: input.files[0],
    success: function(response) {
      console.log(response)
    },
  });