_[Cloudflare R2](https://www.cloudflare.com/en-gb/products/r2/) Storage allows developers to store large amounts of unstructured data without the costly egress bandwidth fees associated with typical cloud storage services._

While using R2 to upload files with presigned URLs, I started getting the following CORS issue in my browser console:

_"Access to fetch at 'r2-url' from origin http://localhost:3000 has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled."_

#### Here is how I solved it using aws-sdk for js V3:
Create an empty node project and install aws-sdk for js v3.

```bash
mkdir r2-cors && cd r2-cors
pnpm init
pnpm install @aws-sdk/client-s3 @aws-sdk/s3-request-presigner
touch cors.js
```

Add `type: "module"` into your `package.json` file.

Next, copy and paste this snippet into cors.js and replace the credentials from your Cloudflare R2 dashboard. Refer [here](https://developers.cloudflare.com/r2/data-access/s3-api/tokens) to create the tokens.

```js
import { PutBucketCorsCommand, S3Client } from "@aws-sdk/client-s3";

const s3Client = new S3Client({
  region: "auto",
  endpoint: `https://${CF-ACCOUNT-ID}.r2.cloudflarestorage.com`, //TODO: replace
  credentials: {
    accessKeyId: `${ACCESS-KEY}`, //TODO: replace
    secretAccessKey: `${ACCESS-SECRET}`, //TODO: replace
  },
});

async function main() {
  const response = await s3Client.send(
    new PutBucketCorsCommand({
      Bucket: "your-bucket-name", //TODO: replace
      CORSConfiguration: {
        CORSRules: new Array({
          AllowedHeaders: ["content-type"], //this is important, do not use "*"
          AllowedMethods: ["GET", "PUT", "HEAD"],
          AllowedOrigins: ["*"],
          ExposeHeaders: [],
          MaxAgeSeconds: 3000,
        }),
      },
    })
  );
  console.dir(response)
}

main();
```


Then run the script with node:

```bash
node cors.js
```

If everything works well, you should see the following logged in the console:

```json
{
  '$metadata': {
    httpStatusCode: 200,
    requestId: undefined,
    extendedRequestId: undefined,
    cfId: undefined,
    attempts: 1,
    totalRetryDelay: 0
  }
}
```

And that's it, your CORS issue should be resolved now.

Cloudflare R2 Storage allows developers to store large amounts of unstructured data without the costly egress bandwidth fees. This post helps solve the CORS issue while using presigned URLs to upload files.

How To Fix - CORS Error while uploading files on Cloudflare R2 using presigned URLs.

[React India](https://reactindia.io) is a community-led non-profit initiative with an international flavor. The first of its kind in India, the event consists of a workshop day and two days of talks. And this year(2022), it was Hybrid, meaning we had online workshops as well (after covid effects). I co-organized the conference and mainly worked on the website.

#### Conducting online workshops:
We had online workshops planned this year(2022) but did not plan how we would do that. I have some background with live conferencing systems and I know the pain of managing them under moderate load. So we knew hosting and managing conferencing software by ourselves is not a good idea, also considering we had less time to achieve this.

#### Choosing a managed conferencing service:
We decided to try out some managed services and found [Dyte](https://dyte.io). Their tagline said "Dyte lets developers integrate branded, configurable, and programmable live audio & video with just a few lines of code" and they lived up to their tagline. We integrated the Dyte SDK in nearly a matter of time with very few lines of code after looking at it for the first time.
Also, the Dyte team is just fantastic, they were always available when we needed them for something, though we did not need them much as the SDK docs and examples were so well done by them. We spent more time on how our UI would look rather than spending time on the integration.

#### But, we had a small problem:
Though everything was good, there was a problem, the default permissions allowed anyone to take control of the meeting, kick anyone out, and shut the meeting down, and this could be bad. Also, we just cannot restrict permissions as the same URL would be used by the speakers also to join and present their workshops.

Thankfully Dyte had a solution to this, Presets, which allow you to define roles for every individual, and that is what we wanted. So we defined 3 roles, Moderator, Speaker, and Participant where Moderator has permission for controlling the recordings, sessions, and participants, Speaker has control to present their screens, create polls, and control their audio/video, and the Participant has permission to view the conference and ask questions through chat.

But how do we bring this into practice we don't have any data about anyone who is entering, as it is just hosted on a URL, accessible by anyone. We had 3 different people/roles here, the Speaker, the Moderator, and the Participant. So we created 3 different URLs with a query param role which would either be moderator or speaker or participant, the participant being the default if not specified. Based on the role query parameter we would assign the Presets we configured in Dyte.

We created the speaker and moderator URLs with another query param checksum. Why? what if someone participant could just try appending the role param to the URL, you must never underestimate anyone :)
I generated these checksums with a randomly generated key + the workshop id, which was only available on the server. We were using Nextjs to build our site, so we used Nextjs API routes to validate checksums on the server. If the checksum matches fail, we do nothing and instead redirect them to the workshop but with participant Preset, which has no rights. So now, no one can append a role param and try to enter anyhow.

#### Conclusion:
We finished the Dyte integration in just four days with doing other work, being excited, and packing our bags to go to Goa for the conference 🎉. As I mentioned that I had experience with live conferencing, I was skeptical if Dyte would ever perform well, with the audience, but it did. Their team has done an amazing job with the whole platform.
This is us behind the scenes, seriously testing the Dyte integration on the React India website, making sure nothing breaks for anyone.

![react-india-dyte-testing.png](https://media.graphassets.com/zFdKbh3JRPaHavCB31F7)

I have written down my experience building the live workshop functionality at React India using Dyte within a short time frame.

How we built live workshops at React India in no time with Dyte!

Hey there 👋🏼 welcome to my first blog! I have been planning to write blogs for a long time and finally, I am here, writing my first blog.

Every time I wanted to write a blog, I delayed it thinking someone has already written it, so why should I? But I've come a long way since then and I know everyone has their perspective on the same topic.

So I will be writing content mostly around tech I use daily or tech I find amazing/useful as I always keep looking around for new tools and try to imagine where I can fit them in my previous or next projects. Also, I will write about any errors I encounter regularly, repeating setups, tips, and tricks I use often, or errors that do not exist on the internet (we all have encountered such errors 🥲) so that I or anyone else can refer to it later. I may also write blogs on topics I find myself explaining again and again to everyone and along with that I may also write about my journey in tech so far and how I think about it for the future.

In short, I'll be writing whatever comes up in my brain, which is tech majorly but not limited to tech. A special thanks to Monica Lent's "[Blogging For Devs](https://bloggingfordevs.com/)" series, which helped me get ahead with my blogging. (I'll do a lot of thanksgiving too).

Follow me on [Twitter](https://twitter.com/intent/user?screen_name=ehteshamdev) for updates on new posts.


Hey there 👋🏼 welcome to my first blog! I have been planning to write blogs for a long time and finally, I am here, writing my first blog.

Ehtesham

Hello, I am Ehtesham 👋🏼

My recent blogs

How To Fix - CORS Error while uploading files on Cloudflare R2 using presigned URLs.

How we built live workshops at React India in no time with Dyte!

Hello World!