R2 CORS Problem

Developers Storage
1

I tried to upload a file from the frontend using the presigned url as follows, but a 403 error occurred, so the problem still occurs even after following the guide.

guide: https://ehtesham.dev/blog/how-to-fix-cors-error-while-uploading-files-on-cloudflare-r2-using-presigned-urls?utm_source=cf-community

const response = await S3.send(
    new PutBucketCorsCommand({
      Bucket: "topping",
      CORSConfiguration: {
        CORSRules: new Array({
          AllowedHeaders: ["content-type"],
          AllowedMethods: ["GET", "PUT", "HEAD"],
          AllowedOrigins: ["*"],
          ExposeHeaders: [],
          MaxAgeSeconds: 3000,
        }),
      },
   })
)
console.dir(response);

const signableHeaders = new Set<string>();
signableHeaders.add('content-length');
const uploadURL = await getSignedUrl(S3, new PutObjectCommand({Bucket: 'topping', Key: `test.png`, ContentLength: 10485760 }), { expiresIn: 3600, signableHeaders });

const formData = new FormData();
formData.append("file", file, `release-${'' + response.release.id}.${file.name.split('.')[file.name.split('.').length - 1]}`);

await fetch(response.uploadURL, {
      method: "PUT",
      body: formData
    })
    .then((response) => response.json())
    .then((response) => {
      console.log(response)
      if(response.success === true) {
        setLoadingText("completed");
      } else {
        dispatch(setNotification({ type: "error", text: "error occured" }));
      }
});

Please help me

2

For reference, I’m using aws-sdk-js-v3

3

This issue seems to occur when I upload a file that is different from the content-length I preset. Uploading a file of the correct size resolves it.