Cloudflare R2 对象存储显示图片的时候 400 bad request，文字和上传图片是可以的

[edonyzpc]

Describe the bug

如下图所示，配置好 R2 存储之后，添加图片，然后查看记录发现获取图片失败。

• CORS 已经配置

[
  {
    "AllowedOrigins": [
      "*"
    ],
    "AllowedMethods": [
      "GET",
      "HEAD"
    ],
    "AllowedHeaders": [
      "*"
    ],
    "MaxAgeSeconds": 3600
  }
]

Steps to reproduce

1. 按照指导文档配置 R2 存储
2. 添加图片
3. 查看记录的时候图片

Screenshots or additional context

No response

[Issues-translate-bot]

Issue is not in English. It has been translated automatically.

---

Title: Cloudflare R2 object storage gets 400 bad request when displaying images, text and uploaded images are OK

[athurg]

Maybe there's something wrong with your Cloudflare configurations, I suggest you to check that first.

[edonyzpc]

@athurg Thank you for your reply, I tried the Cloudflare R2 configurations but it failed. So CORS can not be blamed.

I tried to access the object file in Chrome, and there is some response like the following image.

It seems that R2 S3 API is not supporting this way to access, the src attribute of img is ${R2_Bucket_S3_API}/${bucket_name}/image_object.png, if I configure the public access with custom domains provided by Cloudflare it worked.

So I checked the memos R2 storage configuration, and I found that I missed the URL prefix configuration when checking the screenshot of document. However, according to Cloudflare, it is not a good idea for product use. And it still not working, I don't know what does it mean of URL prefix and URL suffix in R2 configuration.

Can memos support customized domain public access configuration for R2?

And I tested it successfully by adding customized javascript to auto-replace the image URL. Of course, it's testing, the code can be more elegant when it is in the backend.

function refresher() {
    setTimeout(function () {
        for (item of document.getElementsByClassName('mt-2')) {
            for (img of item.getElementsByTagName('img')) {
                if (img.src.startsWith('https://img.edony.ink/memos')) continue;
                img.setAttribute('src', 'https://img.edony.ink/memos/' + img.src.split('/')[img.src.split('/').length - 1]);
            }
        }
    }, 1500)
}

setInterval(function () {
    refresher();
}, 30000)

[edonyzpc]

it seems that it is R2 access problem not memos and close the issue.