Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://fra1.digitaloceanspaces.com/… (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
Hello! I tried to solve this issue, but I keep getting error. I spent several hours to figure out what can be wrong, but Id like to ask some folks help in this topic.
In a nutshell I host a static website on AWS S3 with CloudFront. I use redirecting HTTP to HTTPS. I also added some CORS policy to allow headers. In CloudFront I also white-listed: [Cross-Origin Request Blocked,Cross-Origin Request Blocked,Cross-Origin Request Blocked] that might be the CloudFront’s cache doesn’t forward headers. But still keep getting this error.
In Digital Ocean I set the CORS setting to many different to try if it’s works but no. Origin: * Allowed methods: [get,put] header name: *
In my react code:
const config = {
Body: jsonFile,
Bucket: BUCKET_NAME,
Key: `${key}`,
};
s3.putObject(config)
.on("build", (request) => {
request.httpRequest.headers["Content-Length"] = json.size;
request.httpRequest.headers["Content-Type"] = "application/json";
request.httpRequest.headers["x-amz-acl"] = "public-read";
request.httpRequest.headers["Access-Control-Allow-Origin"] = "*";
console.log("httprequest", request);
})
.send((err, data) => {
if (err) {
console.log("Failed to upload file", `${err}`);
uploadError(err);
} else {
successWithUrl(data.location);
}
});
Thanks for any help :) Gabz