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
Erisa5mo 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
lettucebaran
lettucebaranOP5mo ago
Can I add my localhost as a custom domain?
lettucebaran
lettucebaranOP5mo 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:
No description
lettucebaran
lettucebaranOP5mo 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:
lettucebaran
lettucebaranOP5mo ago
No description
Erisa
Erisa5mo 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.
lettucebaran
lettucebaranOP5mo 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?
Want results from more Discord servers?
Add your server