Question

XMLHttpRequest file upload to Spaces fails due to CORS issue

I’m trying to upload a file to Spaces using XMLHttpRequest with a pre-signed url generated by the boto3 Python library. I’m using the v2 signature type as the AWS v4 signature is not supported (yet). (https://www.digitalocean.com/community/questions/signed-urls-for-private-objects-in-spaces)

Performing an upload from the command line using the pre-signed url is working fine. However when doing a PUT request through an XMLHttpRequest object in Javascript I’m getting an CORS related error (“No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://XXX’ is therefore not allowed access”)

I have enabled CORS policies for this particular host like this:

<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>http://XXX</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

The preflight OPTIONS http request actually returns the appropriate headers like this:

Access-Control-Allow-Headers:content-type
Access-Control-Allow-Methods:PUT
Access-Control-Allow-Origin:http://XXX
Content-Length:0
Date:Wed, 15 Nov 2017 15:41:08 GMT
Strict-Transport-Security:max-age=15552000; includeSubDomains; preload
Vary:Origin
x-amz-request-id:tx000000000000003236214-005a0c6014-7ded-ams3a

In the actual PUT request which upload the file payload the headers returned by the Digital Ocean does not return the required Acces-Control-Allow-Origin header though:

Accept-Ranges:bytes
Content-Length:187
Content-Type:application/xml
Date:Wed, 15 Nov 2017 15:41:08 GMT
Strict-Transport-Security:max-age=15552000; includeSubDomains; preload
x-amz-request-id:tx00000000000000323b494-005a0c6014-ae42-ams3a

This finally results in a 403 Forbidden error. I’m really in the dark on this one, any insight would be highly appreciated…


Submit an answer


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!

Sign In or Sign Up to Answer

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.

Accepted Answer

@krksgbr what a coincidence, I was just about to post the solution to my own question. It turned out not to be a CORS issue at all (sorry about that DO), but related to the way the file was sent through Javascript. Apparently you have to wrap your file in a Blob object and not send it as a raw file (e.g. xhr.send(upload_file)) or through the FormData interface.

I managed to upload a file like this:

var blob = new Blob([upload_file], {type: f.upload_file}); var xhr = new XMLHttpRequest(); xhr.open(‘PUT’, v2_presigned_url); xhr.send(blob);

https://i.postimg.cc/QNykrWH6/Screen-Shot-2019-08-09-at-18-32-25.png

i have set Header name ‘Access-Control-Allow-Origin’ and Origin * in spaces setting. My problem is that i am not getting header while accessing ‘https://schoolonapp.sgp1.cdn.digitaloceanspaces.com/8mfd9df75gdemo_test/logo_iahwuhieo4.png’ in postman or chrome. What is the issue?

@al3x5 @krksgbr @johngannon

Hey, did you find a solution/explaination ? I’m stuck on this problem too, thanks

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more