Learn more about Cloudflare Access CORS Settings. Our Cloudflare Support team is here to help you with your questions and concerns.

Cloudflare Access CORS Settings

Are you wondering how your browser ensures that a website from Domain X doesn’t snatch resources from Domain Y?
Well, the answer lies in Cross-Origin Resource Sharing (CORS).

Today, we will take a close look at CORS and how it safeguards our data while managing our bucket resources.

CORS makes sure that only the right domains get access to specific resources. It does this by using special headers in the HTTP responses from the resource domain, letting our browser double-check if the resource domain permits access.

CORS in Action with Your Bucket

When you’re mingling with a bucket through a web browser, CORS steps in. Here are the two options:

1. Set a Bucket to Public:

   This option makes our bucket accessible on the Internet as read-only. In other words, anyone can request and load objects from our bucket in their browser or anywhere else. This works well if our bucket contains images used in a public blog.
2. Presigned URLs:

   This grants individuals with a unique URL permission to execute specific actions on our bucket.

Before diving into CORS, we need the following:

• An R2 bucket with at least one object (create one if needed).
• A domain to access the object (even localhost will do).
• Optional: Access keys, are only required for creating presigned URLs.

Using CORS with a Public Bucket

1. First, make sure the bucket is set to allow public access.
2. Then, add a CORS policy to the bucket to allow the file to be shared.

Using CORS with a Presigned URL

1. Here, we need our S3-compatible credentials to generate the predesigned URL.
2. Use `@aws-sdk/client-s3` in JavaScript to create a presigned PutObject URL.
3. Then, upload an object using cURL to ensure our presigned URL is in top-notch shape.

Adding CORS Policies from the Cloudflare Dashboard

1. Head over to the Cloudflare dashboard and select R2.
2. Locate and select the bucket.
3. Under CORS Policy, add our CORS policy from the JSON tab.
4. Finally, click Save.

We can easily configure CORS settings by going to Transform Rules under Rules. Then, click “Modify Response Header,” and create a rule. This rule makes sure the CORS settings are on point.

[Need assistance with a different issue? Our team is available 24/7.]

Conclusion

In brief, our Support Experts introduced us to Cloudflare Access CORS Settings.