Question

CORS settings not working on Spaces

Posted June 2, 2020 6.2k views
JavaScriptReactDigitalOcean SpacesTypeScript

Hello!

I am trying to upload a file to Spaces through the Javascript aws-sdk library.

I have an <input type="file" onChange={handleFileUpload}/> element, with this handler:

const onSelectFile = (e: any) => {
    if (e.target.files && e.target.files[0]) {
        uploadFile(e.target.files[0]);
    }
}

And the definition for uploadFile is:

import AWS from "aws-sdk";

const spacesEndpoint = new AWS.Endpoint("sgp1.digitaloceanspaces.com");

const s3 = new AWS.S3({
    endpoint: spacesEndpoint as any,
    accessKeyId: "---",
    secretAccessKey: "---"
});

export const uploadFile = async (file: any) => {
    const config = {
        Body: file,
        Bucket: "---",
        Key: "test",
    };
    s3.putObject(config)
        .on("build", request => {
            request.httpRequest.headers.Host="https://runbook.sgp1.digitaloceanspaces.com";
            request.httpRequest.headers["Content-Length"] = file.size;
            request.httpRequest.headers["Content-Type"] = "application/octet-stream";
            request.httpRequest.headers["x-amz-acl"] = "public-read";
            request.httpRequest.headers["Access-Control-Allow-Origin"] = "*";
        })
        .send((err) => {
            if (err) {
                console.log("Failed to upload file", `${err}`);
            }
        });
};

export default s3;

However, whenever I invoke this, I get the following errors:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://---.sgp1.digitaloceanspaces.com/test. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://---.sgp1.digitaloceanspaces.com/test. (Reason: CORS request did not succeed).

Failed to upload file NetworkingError: Network Failure

On my Spaces bucket, I set the following settings via the UI:

Origin: *
Allowed Methods: Get, Put, Delete, Post, Head
Allowed Headers: (empty)
Access Control Max Age: 15

I’ve been struggling with this for a few hours. I even waited an hour in case the CORS settings take a while to propagate.

As far as I can tell, this should be a working minimal example.

The issue is that the Access-Control-Allow-Origin header is missing from the prelight headers (HEAD request), even though it’s set to “*” via the UI.

How can I fix this? I’d really appreciate some help!

1 comment

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
4 answers

Try adding for both http and https and also for all subdomains using wildcard in the digitalocean settings for space using the gui

that is if my domain is www.example.com then add for

https://*.example.com
http://*.example.com

I think, you should add “Access-Control-Allow-Origin” to the Allowed headers field. You have kept it empty so no header is found in the CORS request.
And as for Origin is set to “*” it means that your space will allow any site to access your space’s content for CORS request.

Hey folks!

Is there something new on that topic?

I also tried leveraging digital ocean spaces - but always getting the CORS error.

Answer NO1 won’t change anything, because my sites not using any subdomains.

NO2 is also not working –> NO2 should actually also stand above NO1, because the asterisk should let through any connection…
Also adding a header name confuses me. Should not the header not only have a name but also a value?

Many Greets,
Franz

In case nobody has been able to get an answer I found something on StackOverflow which worked for me
Here