Report this

What is the reason for this report?

Anyone solved the Spaces Javascript CORS Access-Control-Allow-Origin blocker from Presigned urls?

Posted on November 4, 2023
ryan

By ryan

I’ve searched all over and I see so many others stating the same problem. I generate a presigned url, and then try to use vanilla Javascript to PUT the file into Spaces. It always gives:

Access to XMLHttpRequest at ‘PRESIGNED_URL’ from origin ‘MY_WEBSITE_DOMAIN_NAME’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

I originally tried following this example since my site is Django based. Django generates the presigned url which is then used by the Javascript. The example is from 2021, so it’s possible something has changed on the DO side.

https://justdjango.com/blog/how-to-upload-large-files

Inside the Spaces Admin, I created a CORS record. I’ve tried setting it to allow everything using * and checking all the method boxes. I’ve tried creating new API keys several times. None of this has worked.

The Preflight response is good and shows all the proper information including my site as the Access-Control-Allow-Origin. The actual PUT fails though.

I’ve tried changing out the Javascript to JQuery even. Same result. I need this to submit on the Client side as to not use the server processor for larger files.

So frustrating. Doing a search finds so many other similar stories.

Anyone else solved this?



This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

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.

Hi there,

I’m not 100% sure, but from what I’ve seen, using a presigned POST instead of a PUT might work better with browsers and might help avoid some of the CORS issues.

I think it’s because POST lets you define a bit more around the upload policy, like allowed origins and file size, whereas PUT can be stricter and more prone to header mismatch problems. I haven’t personally tested POST uploads extensively there yet. Might be worth exploring, though.

If you’re working with Django and DigitalOcean Spaces, this tutorial might be worth checking out for inspiration (though it’s focused more on server-side): How To Use python-decouple With DigitalOcean Spaces in Django

- Bobby

The developer cloud

Scale up as you grow — whether you're running one virtual machine or ten thousand.

Get started for free

Sign up and get $200 in credit for your first 60 days with DigitalOcean.*

*This promotional offer applies to new accounts only.