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