Cloudflare存储桶优雅管理项目;R2 Web的使用以及部署

项目地址：

vikiboss/r2-webGitHub 仓库

项目优势(摘自github)

打开浏览器就能用，跨平台零成本
拖拽、粘贴上传 + 图片压缩，省流量省时间
PWA 支持，装到桌面像原生应用
纯前端实现，数据不经过第三方服务器

1.CORS策略

部署很简单，我们如果不需要私有部署的话可以直接使用项目作者的cloudflare的Pages。即r2.viki.moe或者本站搭建的https://r2.233595.xyz。本站搭建的经过CF优选，国内访问速度更快(下文的CORS配置遵循本站，如果想使用原作者配置将注释内换成https://r2.viki.moe即可)
PS:简单来说就是添加了谁的CORS策略就访问谁的网站。

想要直接使用需要我们进入到存储桶的设置——>CORS 策略——>添加，将默认内容替换为以下代码：

[
  {
    "AllowedOrigins": [
      "https://r2.233595.xyz"/*如果进行自有page部署请填入自己的域名*/        ],
    "AllowedMethods": [
      "GET",
      "POST",
      "PUT",
      "DELETE",
      "HEAD"
    ],
    "AllowedHeaders": [
      "authorization",
      "content-type",
      "x-amz-content-sha256",
      "x-amz-date",
      "x-amz-copy-source"
    ],
    "MaxAgeSeconds": 86400
  }
]

接下来我将具体介绍如何获取账户 ID（Account ID）、访问密钥 ID（Access Key ID）、秘密访问密钥（Secret Access Key）、存储桶名称（Bucket Name）和自定义域名（可选）。自定义域名可太好了，我给R2源站套了一层CDN加速，这下总算不用上传到cloudflare——>复制链接——>替换源站域名了。

2.Account ID&存储桶名称

首先账户ID在存储和数据库——>R2对象存储——>概述里面的Account Details——>Account ID就是(存储桶名称也请使用此页数据)：

3.创建User API令牌

下一步我们要点击账户ID上面的API Tokens——>{}Manage
进入API配置页面,点击创建User API令牌：

名称随意,权限推荐选为管理员读和写,其他不用动,接着创建User API令牌。

4.访问密钥ID&秘密访问密钥

创建完成后即可复制访问密钥ID和机密访问密钥并填入访问密钥 ID（Access Key ID）、秘密访问密钥（Secret Access Key）就可以了。如果你对于源站做了CDN加速，将自定义域名填入你的加速域名即可,如:
https://cdn.你的域名.xxx
至此大功告成。