Your issue is on the Cloudflare side and not your code. You need to modify the Cloudflare resource CORS policy to allow requests from your domain.

However i’m not sure this is possible and you might have to use a CORS proxy.

You need to setup CORS for your bucket.

Currently, you have to use the S3 API PutBucketCors to configure CORS for your bucket.

see https://developers.cloudflare.com/r2/data-access/public-buckets/#configure-cors-for-your-bucket

I’m Trying to upload my image to my cloudflare. But I got this CORS Error.

I think this error means cloudflare server do not allow me to upload my photo.

import "./styles.css";

export default function App() {
  const url =
    "https://api.cloudflare.com/client/v4/accounts/d9db7da39482b78c6ac50679a81f16f7/images/v1";
  const direct_upload_url =
    "https://api.cloudflare.com/client/v4/accounts/d9db7da39482b96srg50679a81f16f7/images/v2/direct_upload";
  const TOKEN = "H14yZzMAKcC0NS557jvExS1PjMqgVumgswEOUZ4h";

  const onChange = async (e) => {
    const file = e.target.files[0];
    const formData = new FormData();

    formData.append("file", e.target.files[0], file.name);
    for (let value of formData.values()) {
      console.log("val", value);
    }

    try {
      const result = await fetch(url, {
        method: "post",
        headers: {
          Authorization: `Bearer ${TOKEN}`
        },
        body: formData
      });
      if (result) {
        console.log(result);
      }
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <input onChange={onChange} type={"file"} />
    </div>
  );
}

This is a code I used.

Please check my problem.