Question

CORS settings not working on Spaces

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!

Subscribe
Share

I have the exact same problem. Did you sort it out?

Thanks, Simon.

p.s. neither of the suggestions worked


Submit an 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.

This comment has been deleted

Hello,

If anyone still has issues add an “Access-Control-Allow-Origin” header as @shehabahmedsayem suggested, save the CORS Configuration and then purge the cache on your CDN.

Hope this helps.

Thanks, Stan

I ended up having to use Just CORS (https://justcors.com) which is a little proxy that adds CORS headers to responses. I have fought and fought with this on Digital Ocean Spaces for over a year now and they haven’t fixed the issue of respecting CORS headers.

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

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

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.

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