Cloudflare Developers•7mo ago

Fetching R2 blob on the client-side (skipping server)

I uploaded a file using the PutObjectCommand method. It's a public file. I want to access this file on the client-side (by skipping the server). So, I thought of getting the file by fetching the URL, but I don't know the file's URL. Would you recommend this approach to get the image URL? - If so, how can I get/construct the URL? - If not, what would you recommend doing instead? E.g., https://<some_value>.r2.com/path/to/file?

7 Replies

Erisa•7mo ago

If you link a custom domain then you can fetch the file from that custom domain You may need to adjust CORS settings for the bucket

lettucebaranOP•7mo ago

Can I add my localhost as a custom domain?

lettucebaranOP•7mo ago

When I navigate to my bucket using the Cloudflare web UI and download the image, I can see the image. I edited the CORS policy of the R2 so the image can be retrieved/get from anywhere:

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

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

This is my signed URL:

https://e303-dk-preview.10588302399247a4add0cce49f3d28ee.r2.cloudflarestorage.com/digital-business-card/sjDArZdvLt9uftQipAyY.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=11e23872c93e9e4d41ff5c0334e816ed%2F20240615%2Fauto%2Fs3%2Faws4_request&X-Amz-Date=20240615T181812Z&X-Amz-Expires=900&X-Amz-Signature=d25e3fb9ea0102eac375bbf02c9891a372f2a90c7db59ec71055d4e0aea1dd25&X-Amz-SignedHeaders=content-length%3Bhost&x-id=PutObject

When I accessed the URL, I expected to see the image. However, this is what I see:

lettucebaranOP•7mo ago

Perhaps the signed URL is for putting the image, meanwhile I am trying to get it. When I search

https://e303-dk-preview.10588302399247a4add0cce49f3d28ee.r2.cloudflarestorage.com/digital-business-card/sjDArZdvLt9uftQipAyY.png

, I get this:

lettucebaranOP•7mo ago

Erisa•7mo ago

You signed a PutObject operation and then tried to perform a GetObject, change it to sign a GetObject instead If the files are public you can skip all the signing by just adding a custom domain.

lettucebaranOP•7mo ago

ah thank you, I managed to solve the issue. I found the conversation very helpful. I hope you have a great rest of the day. hey, it's me again. My getObject signed URLs are expiring. I saw that the latest expiry date is 1 week. What is the optimum workflow to keep a getObject signed URL in the database to retrieve images? I was thinking of server 1. get url in db 2. check if it has expired - if so, get another signed url - if not, display signed url is this the ideal approach?

Gaming

Programming

Fetching R2 blob on the client-side (skipping server)