Question

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at

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


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