六维教程

公开访问与自定义域名

R2 默认是私有的,存进去的文件外部访问不到。但很多场景需要把文件直接暴露给浏览器,图片站、静态资源、下载链接都要走公开访问。R2 提供了两种公开方式,一种临时测试用,一种生产正式用。

默认私有状态

刚创建的 Bucket 里所有对象都是私有的,只有持有 Access Key 的人能通过 S3 API 读取。直接在浏览器输入对象地址会返回 403 Forbidden。

这种默认设计是为了安全,避免敏感文件意外泄露。需要对外公开时再手动开启。

r2.dev 开发地址

R2 给每个 Bucket 提供一个免费的 r2.dev 子域名,格式是

https://pub-<hash>.r2.dev

开启方式很简单。进入 Bucket 详情页,找到 Settings 标签,在 Public access 区域点击”Allow Access”启用 r2.dev 开发地址。

启用后就能用这个地址直接访问对象,例如

https://pub-abc123.r2.dev/images/cover.png

r2.dev 地址的特点

特性 说明
费用 免费
限速 有速率限制,不适合大流量
域名固定 自动分配,无法自定义
HTTPS 自动启用
适用场景 开发测试、Demo、小流量展示

r2.dev 主要是给开发调试用的,生产环境不建议依赖它,因为限速和不可控的域名。

自定义域名

生产环境正式对外服务要用自定义域名,例如把 cdn.example.com 绑到 R2 Bucket 上。

前提条件是这个域名要托管在 Cloudflare DNS(Cloudflare 的域名解析服务)上。如果域名用的是别家 DNS,需要先把 NS 记录切到 Cloudflare。

绑定步骤如下

步骤 操作
1 进入 Bucket 详情页,Settings 标签
2 在 Custom Domains 区域点击 Connect Domain
3 输入要绑定的域名,例如 cdn.example.com
4 Cloudflare 自动创建 CNAME 记录指向 R2
5 等待证书签发,状态变 Active 即可使用

绑定完成后,访问 https://cdn.example.com/images/cover.png 就能直接拉到对象,并且自动走 Cloudflare 的全球 CDN 加速。

自定义域名的优势

对比项 r2.dev 地址 自定义域名
速率限制
域名可读 不可读,一串 hash 可读,自己定
CDN 加速 共享 独享,可配置缓存规则
证书 自动 自动签发并续期
适合场景 开发测试 生产环境

缓存配置

自定义域名背后走的是 Cloudflare 的 CDN 网络。可以在仪表盘的 Cache Rules 和 Page Rules 里针对 R2 域名配置缓存策略。

常见做法是给图片类对象设置长缓存

对象类型 Cache-Control 说明
图片、视频 public, max-age=31536000 一年缓存,适合带版本号
CSS、JS public, max-age=86400 一天缓存
用户上传 private 或短 max-age 不缓存或短缓存

也可以在上传对象时通过 Cache-Control 元数据指定,这样就不用单独配 CDN 规则

wrangler r2 object put my-assets/images/cover.png --file ./cover.png --cache-control "public, max-age=31536000"

CORS 跨域配置

如果前端 JS 代码要从 R2 拉文件(例如 Canvas 处理图片、fetch 读取 JSON),就需要配置 CORS(跨域资源共享),否则浏览器会拦截请求。

在 Bucket 的 Settings 页面找到 CORS Policy,添加规则。一个允许指定来源 GET 请求的配置如下

[
  {
    "AllowedOrigins": ["https://example.com"],
    "AllowedMethods": ["GET"],
    "AllowedHeaders": ["*"],
    "MaxAgeSeconds": 3600
  }
]

字段含义

字段 作用
AllowedOrigins 允许的来源域名,可用 * 表示全部
AllowedMethods 允许的 HTTP 方法,GET、PUT、DELETE 等
AllowedHeaders 允许的请求头
MaxAgeSeconds 预检请求缓存时间,减少 OPTIONS 请求

生产环境不要用 * 全放行,明确列出允许的域名更安全。

小结

R2 公开访问有 r2.dev 和自定义域名两条路,前者开发测试方便,后者生产正式用。配好 CORS 才能让前端 JS 顺利拉取文件。下一篇讲更精细的临时访问控制,预签名 URL。

上一篇 S3 兼容 API 与 SDK 集成
下一篇 预签名 URL

上一篇
S3 兼容 API 与 SDK 集成
下一篇
预签名 URL