CD
Cloudflare Developers•5d ago
Barty

Hi everyone!

Hi everyone! We’re running into a weird issue with our video uploads on Cloudflare R2, and we could use some help figuring it out. We’re using Vue.js v3 on the frontend with the Uppy library for uploading files, and Django v4 on the backend with Boto3 (v1.34) to handle all the R2-related API stuff. We’re creating presigned PUT URLs on the backend to upload files directly to the R2 bucket from the client side (browser), including multipart uploads. Everything works perfectly on most internet connections, but on certain ISPs, we’re getting CORS errors, and the uploads just don’t go through. It’s super inconsistent - like, on one ISP, it’s all smooth sailing, on second the upload goes through 30% of the time, and on third, it fails every time with CORS issues. We suspect it might have something to do with slower internet speeds, but don't have any hard proofs for that. We’ve double-checked our CORS settings on the R2 bucket, and the presigned URLs are definitely being generated correctly. We’ve also tried different devices and browsers, and the problem seems tied to specific ISPs. R2 Bucket CORS Policy: 
[
  {
    "AllowedOrigins": [
      "https://example.com",
    ],
    "AllowedMethods": [
      "GET",
      "DELETE",
      "POST",
      "PUT",
      "HEAD"
    ],
    "AllowedHeaders": [
      "Authorization",
      "x-amz-date",
      "x-amz-content-sha256",
      "Content-Type",
      "Length",
      "Content-Length",
      "content-type"
    ],
    "ExposeHeaders": [
      "ETag",
      "Location",
      "Access-Control-Allow-Origin",
      "Content-Type",
      "Content-Length"
    ],
    "MaxAgeSeconds": 3000
  }
]
[
  {
    "AllowedOrigins": [
      "https://example.com",
    ],
    "AllowedMethods": [
      "GET",
      "DELETE",
      "POST",
      "PUT",
      "HEAD"
    ],
    "AllowedHeaders": [
      "Authorization",
      "x-amz-date",
      "x-amz-content-sha256",
      "Content-Type",
      "Length",
      "Content-Length",
      "content-type"
    ],
    "ExposeHeaders": [
      "ETag",
      "Location",
      "Access-Control-Allow-Origin",
      "Content-Type",
      "Content-Length"
    ],
    "MaxAgeSeconds": 3000
  }
]
2 Replies
Barty
BartyOP•5d ago
The only error we’re seeing is this one in the browser console: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://<accountid>.eu.r2.cloudflarestorage.com/<path-to-resource>/74128302-057e-4861-8cfb-37b7fd77962b.mp4?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=dc122a2b950b91b5a36877a0de1a66ea%2F20250226%2Fauto%2Fs3%2Faws4_request&X-Amz-Date=20250226T185806Z&X-Amz-Expires=3600&X-Amz-SignedHeaders=content-length%3Bcontent-type%3Bhost&X-Amz-Signature=525e6bbf66888766a9dd23e43f1bdfb1a7e5923366295136d87b1fec13113457. (Reason: CORS request did not succeed). Status code: (null). Things we tried that didn’t help: * Updating the Boto3 package on backend to v1.35 * Updating the Uppy library to the latest version * Changing CORS policy settings on R2 * Changing browsers * The issue appears both on multipart and non-multipart uploads * Using different files with different sizes. Has anyone else run into this? Any ideas on why this might be happening, or tips on how to fix it? Also, if there are any debugging steps or tools you’d recommend, that would be super helpful. Thanks in advance for the help! oh wow. Would adding custom domain on the R2 fix this? Do you have any resources that could help us achieve this?
Space
Space•2d ago
@Barty did you get this solved?

Did you find this page helpful?