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!

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.

×
2 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.

Submit an Answer