How do I configure a Backblaze bucket for self-hosting?

[forabi]

I think I've done everything right according to the documentation. I can confirm that all the pieces work fine if I'm using a local minio instance, but when trying to switch to a Backblaze bucket, I keep getting CORS missing issues in the browser when trying to view or upload photos.

s3:
    are_local_buckets: false
    use_path_style_urls: false
    b2-eu-cen:
        key: xxx
        secret: xxx
        endpoint: s3.eu-central-003.backblazeb2.com
        region: eu-central-003
        bucket: xxx

I've run the following command to enable CORS for the bucket:

b2 bucket update --cors-rules "$(<./cors.json)" $B2_BUCKET_NAME allPrivate

[
  {
    "corsRuleName": "allowUploadsAndDownloadsFromWebOrigin",
    "allowedOrigins": [
      "https://<MY_WEB_APP_DOMAIN>"
    ],
    "allowedHeaders": [
      "*"
    ],
    "allowedOperations": [
      "b2_download_file_by_id",
      "b2_download_file_by_name",
      "b2_upload_file",
      "b2_upload_part"
    ],
    "exposeHeaders": [
      "etag"
    ],
    "maxAgeSeconds": 3600
  }
]

yet:

The upload URL itself seems to match the S3-compatible URL listed in a files info on Backblaze, so it does seem like CORS isn't working.

[mnvr]

I can't answer in an authoritative manner, but at a glance it seems like the config in your case is missing the s3_* operations from the allowed operations list. I'll just copy paste an working B2 CORS config someone shared on our community Discord recently (again, I'm not vouching for its correctness, or if it is the most secure, just sharing in case it helps):

[
  {
    "corsRuleName": "entephotos",
    "allowedOrigins": [
      "*"
    ],
    "allowedHeaders": [
      "*"
    ],
    "allowedOperations": [
      "b2_download_file_by_id",
      "b2_download_file_by_name",
      "b2_upload_file",
      "b2_upload_part",
      "s3_get",
      "s3_post",
      "s3_put",
      "s3_head"
    ],
    "exposeHeaders": [
      "X-Amz-Request-Id",
      "X-Amz-Id-2",
      "ETag"
    ],
    "maxAgeSeconds": 3600
  }
]

Credits: User aflp and fwz on our community Discord.

[mnvr]

The above list uses "allowedHeaders": ["*"], but a tighter listing could be

"allowedHeaders": [
  "range",
  "authorization",
  "Referer",
  "Content-Type",
  "X-Bz-File-Name",
  "X-Bz-Part-Number",
  "X-Bz-Content-Sha1",
  "X-Auth-Token",
  "X-Client-Package",
  "X-Auth-Access-Token"
],

[forabi]

@mnvr Thanks, indeed that was the issue, also I had to use allowedOrigins: ["*"], otherwise the images would fail to load on the web app. I wonder if the Origin can be set on the image requests as well in the browser so that I can have a more restrictive origin specified.

[mnvr]

Ah, I see. From a quick glance, it seems that the browser does not send the Origin in this case because we do a 307 redirect, and

The Fetch spec requires browsers to set the origin to a “globally unique identifier” (essentially the same thing as “opaque origin”, which basically means null…) in one case: Redirects across origins

source

But I will keep this in mind, and try to see if there is something we can do differently to ensure the Origin is also sent by the web app.