Cloudflare Developers•2y ago

r2 CORS problem

Hello guys, I've been trying to PUT a data to my r2 bucket from the application's front end using a presigned URL but it have been blocked by CORS Error:

Access to fetch at 'https://video.xxxxxxxxxx.r2.cloudflarestorage.com/xxxxxxx 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.

In the bucket's CORS config é have the method PUT and the URL http://localhost:3000 set My request is simple as

    await fetch(signedURL, {
      method: 'PUT',
      body: data,
    })

    await fetch(signedURL, {
      method: 'PUT',
      body: data,
    })

the signed URl is generated like this

    const signedUrl = await getSignedUrl(
      r2,
      new PutObjectCommand({
        Bucket: process.env.CLOUDFLARE_BUCKET_NAME,
        Key: 'key',

      }),
      { expiresIn: 60 },
    )

    const signedUrl = await getSignedUrl(
      r2,
      new PutObjectCommand({
        Bucket: process.env.CLOUDFLARE_BUCKET_NAME,
        Key: 'key',

      }),
      { expiresIn: 60 },
    )

the s3 instance is pretty simple as well:

export const r2 = new S3Client({
  region,
  endpoint,
  credentials: {
    accessKeyId,
    secretAccessKey,
  },
})

export const r2 = new S3Client({
  region,
  endpoint,
  credentials: {
    accessKeyId,
    secretAccessKey,
  },
})

Any adea how to get over the CORS problem in this context?

10 Replies

lurker•8mo ago

I am dealing with the same issue. Have you figured out what was wrong?

Lionblade•7mo ago

I am having CORS issues as well in R2. I did a self-signed cert in my local dev and am using a custom domain for it, and everything. I added that to the R2 CORS policy, and no dice. I have no idea what is going on. If I open the Console and refresh, CORS issues go away. Close the console, and it gets issues with images it hasn't loaded yet. Can someone from CF PLEASE let us know what is going on? It seems like R2's CORS is just BROKEN Here is what I tried, which I also asked in the r2 channel, and no responses.

  {
    "AllowedOrigins": [
      "http://localhost:3000",
      "https://localhost:3000",
      "http://localhost:3030",
      "https://localhost:3030",
      "https://local.dev:3000"
    ],
    "AllowedMethods": [
      "GET",
      "PUT",
      "POST",
      "HEAD"
    ],
    "ExposeHeaders": [
      "Content-Type",
      "Access-Control-Allow-Origin",
      "ETag"
    ]
  }
]

  {
    "AllowedOrigins": [
      "http://localhost:3000",
      "https://localhost:3000",
      "http://localhost:3030",
      "https://localhost:3030",
      "https://local.dev:3000"
    ],
    "AllowedMethods": [
      "GET",
      "PUT",
      "POST",
      "HEAD"
    ],
    "ExposeHeaders": [
      "Content-Type",
      "Access-Control-Allow-Origin",
      "ETag"
    ]
  }
]

I've tried simpler policies too, and using wildcards for allowed methods. Always CORS issues when the console is closed.

harshil1712•7mo ago

Hello, I created a small repo that might help: https://github.com/harshil1712/nextjs-r2-demo/tree/main Make sure the bucket name is correct and that you don't have any browser extension that might be causing the errors

GitHub

GitHub - harshil1712/nextjs-r2-demo

Contribute to harshil1712/nextjs-r2-demo development by creating an account on GitHub.

Lionblade•7mo ago

In your repo you have this JSON for the CORS policy:

    {
        "AllowedOrigins": [
            "http://localhost:3000"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST"
        ],
        "AllowedHeaders": [
            "*"
        ],
        "ExposeHeaders": [
            "ETag"
        ],
        "MaxAgeSeconds": 3000
    }
]

    {
        "AllowedOrigins": [
            "http://localhost:3000"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST"
        ],
        "AllowedHeaders": [
            "*"
        ],
        "ExposeHeaders": [
            "ETag"
        ],
        "MaxAgeSeconds": 3000
    }
]

Is this what we should set in our R2 settings? Because I am quite sure I tried that and was stil seeing CORS issues on localhost confirmed, I just tried that, still get:

Access to XMLHttpRequest at 'my url to r2 here' from origin 'https://local.dev:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Access to XMLHttpRequest at 'my url to r2 here' from origin 'https://local.dev:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Works fine when console is open. https://community.cloudflare.com/t/problem-with-settings-cors-policies-on-r2/432339/80?page=2 This thread highlights others having issues for over a year and still having issues. R2 CORS is broken.

harshil1712•7mo ago

Things work fine when the browser console is close. But you get the error when the console is open? Am I understanding it correctly?

Lionblade•7mo ago

Correct! It is very weird

harshil1712•7mo ago

Interesting. Have you tried different browsers? Do see the same behaviour there?

Lionblade•7mo ago

I did, but, oddly enough, I can't reproduce in Firefox now. Hmm Let me try Chrome Yep super weird, Chrome still has the issue Maybe I need to clear cache Chrome still has the issue. Firefox seems okay, that is very werid I'd really like Chrome to work 😦 Also I did try setting Transform Rules per that thread above, but I am not sure if I did it right. Error persists in Chrome (Same issue in Edge, which I think is Chromium based.) Any thing else I can try? It is odd that it works fine with my setup for Firefox but not Chrome, no?

harshil1712•7mo ago

I am not sure why you're facing this issue. I am using a Chromium based browser and things work fine for me. Maybe there is an extension that is causing the error? I am not sure.

Lionblade•4mo ago

Very strange, I’ll keep digging, but the only extension I’m using is Adblock. Not sure why that’d cause it Still cannot track this down. Would really appreciate some support. CORS issues persist in all Chrome/Chromium/Edge browsers, but not Firefox. Again, everything works fine when the console is open in Chrome. (Unless I turn off disable cache) To anyone else having this issue, I finally fixed it. I had to do two things, but I am not sure why R2/Cloudlfare make it so hard. 1. Add a rule (called something like CORS Fix) to Transfrom Rules Set it to Modify Response Header "If... (custom filter expression) Hostname contains (your host name as the value) Then.... "Vary" (for header name) = Access-Control-Request-Headers, Access-Control-Request-Method, Origin for Value Place at: First 2. Set your CORS policy to

  {
    "AllowedOrigins": [
      "*"
    ],
    "AllowedMethods": [
      "GET",
      "PUT",
      "POST",
      "HEAD"
    ],
    "AllowedHeaders": [
      "*"
    ],
    "ExposeHeaders": [
      "Content-Type",
      "Access-Control-Allow-Origin",
      "ETag"
    ],
    "MaxAgeSeconds": 3600
  }
]

  {
    "AllowedOrigins": [
      "*"
    ],
    "AllowedMethods": [
      "GET",
      "PUT",
      "POST",
      "HEAD"
    ],
    "AllowedHeaders": [
      "*"
    ],
    "ExposeHeaders": [
      "Content-Type",
      "Access-Control-Allow-Origin",
      "ETag"
    ],
    "MaxAgeSeconds": 3600
  }
]

3. Purge and Clear all cache for your site in R2 4. CLear your Browser's history. Clear everything / all cache etc 5. Hopefully it then works for you as it does for me

Gaming

Programming

r2 CORS problem

Did you find this page helpful?