Cloudflare Developers•2y ago

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

Unknown User•2y ago

Message Not Public

MigmacOP•2y 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?

Unknown User•2y ago

Message Not Public

MigmacOP•2y 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

Unknown User•2y ago

Message Not Public

MigmacOP•2y 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)

Unknown User•2y ago

Message Not Public

Gaming

Programming

Because as Kian mentioned the SPA does