CD
Cloudflare Developers•3y ago
Migmac

Because as Kian mentioned the SPA does

Because as Kian mentioned the SPA does not have a server so the cors approach would never really work as the 'client' can't really respond (if i got it correctly)
7 Replies
Sid
Sid•3y ago
Setting up a bucket's CORS policies is a one time thing only. You can do it from your local machine instead of trying to do it from your app That's what Kian was sayng. You cannot set up CORS from a browser because you would need CORS set up in the first place to be able to do that. Chicken-and-egg
Migmac
MigmacOP•3y ago
Oh, so I can setup cors one time and then the bucket keeps those settings? How should I do that? So its a matter of configuring the bucket then?
Sid
Sid•3y ago
Yep! So like I said, the only way to configure CORS is via the S3 API. So you'd have to set up the S3 SDK locally. Then it is a matter of sending out a PutBucketCors command. A CORS UI is in the works and will arrive soon, but it doesn't exist yet This is what that could look like: 
  s3.send(
    new PutBucketCorsCommand({
      Bucket: "bucket",
      CORSConfiguration: {
        CORSRules: [
          {
            AllowedOrigins: ["origin.com", "localhost:3000"],
            AllowedMethods: ["GET"],
            AllowedHeaders: [],
          },
        ],
      },
    })
  );
  s3.send(
    new PutBucketCorsCommand({
      Bucket: "bucket",
      CORSConfiguration: {
        CORSRules: [
          {
            AllowedOrigins: ["origin.com", "localhost:3000"],
            AllowedMethods: ["GET"],
            AllowedHeaders: [],
          },
        ],
      },
    })
  );
Migmac
MigmacOP•3y ago
I have set the bucket cors via aws s3api put-bucket-cors --bucket <bucketName> --cors-configuration file://cors.json --endpoint-url https://<accountid>.r2.cloudflarestorage.com and just checked via aws s3api get-bucket-cors --bucket <bucketName> --endpoint-url https://<accountid>.r2.cloudflarestorage.com I get back 
{
    "CORSRules": [
        {
            "AllowedMethods": [
                "GET"
            ],
            "AllowedOrigins": [
                "localhost:5173"
            ]
        }
    ]
}
{
    "CORSRules": [
        {
            "AllowedMethods": [
                "GET"
            ],
            "AllowedOrigins": [
                "localhost:5173"
            ]
        }
    ]
}
as the defined bucket-cors and yet still get the ...from origin 'http://localhost:5173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Any idea on how to address this? nevermind. Silly mistake on my end. changed localhost:5173 into http:localhost:5173
Sid
Sid•3y ago
Oh um, you shouldn't need that http:
Migmac
MigmacOP•3y ago
it didn't work without it and now everything is working as I would expect it to!! Thank you a lot for you extremely useful guidance!!! Perhaps a useful thing to add to the docs currently (as the UI is not yet working) - Add this to package.json inside the scripts 
 
"scripts": {
  "cors:set": "aws s3api put-bucket-cors --bucket <BucketName> --cors-configuration file://cors.json --endpoint-url https://<UserID>.r2.cloudflarestorage.com",
  "cors:get": "aws s3api get-bucket-cors --bucket <BucketName> --endpoint-url https://<UserID>.r2.cloudflarestorage.com"
 
"scripts": {
  "cors:set": "aws s3api put-bucket-cors --bucket <BucketName> --cors-configuration file://cors.json --endpoint-url https://<UserID>.r2.cloudflarestorage.com",
  "cors:get": "aws s3api get-bucket-cors --bucket <BucketName> --endpoint-url https://<UserID>.r2.cloudflarestorage.com"
- Replace <BucketName> with your R2 bucket name - Replace <UserID> with your cloudflare User ID - Create a cors.json file with your desired CORS settings 
{
  "CORSRules": [{
    "AllowedOrigins": ["http://localhost:3000"],
    "AllowedMethods": ["GET"],
    "AllowedHeaders": []
  }]
}
{
  "CORSRules": [{
    "AllowedOrigins": ["http://localhost:3000"],
    "AllowedMethods": ["GET"],
    "AllowedHeaders": []
  }]
}
- To apply the CORS rules do: - npm run cors:set (To set the CORS rules) - npm run cors:get (To check if it applied correctly)
Sid
Sid•3y ago
Oh that's interesting, but glad it is working! The UI, along with a docs update specifically for CORS is coming very soon though! Actually, you know what, you are totally correct about needing http:// BTW

Did you find this page helpful?