一个使用cloudflare页面规则实现干净的图床URL的方法

[MuZhou233]

效果

能够使用形如 https://example.com/image/favicon.jpg?raw 的格式获取到原始数据，和旧项目 onedrive-cloudflare-index 的格式一致

缺点

• cloudflare 免费计划仅能创建三个页面规则
• 图片最好集中在一个或多个文件夹中，最好没有和其他需要预览的文件混在一起
• 需要接入 cloudflare，访问速度略有影响
• 网站可达性受 cloudflare 影响（当前部分地区受影响）
• 页面规则十分粗暴，可能会影响到其他功能

方法

在下面的例子中，域名为 example.com ，需要使用的图片文件均在 images 文件夹中，你可以根据自己的实际情况更换
如果有多个文件夹，则可以通过创建多个页面规则实现，但注意免费计划仅能创建三个

1. 通过 CNAME 或 A 记录将部署好的网站接入 cloudflare，并且开启代理（CDN）功能
2. 在 cloudflare 中创建页面规则，匹配URL为 example.com/images/*?raw，选取设置为转发URL，状态代码 随意，目标URL为https://example.com/api/raw/?path=/images/$1

扩展

• 匹配规则可以看 cloudflare 的文档，这里只是给出了一个常见的例子
• 用页面规则跳转到自己编写的 cloudflare worker 可以实现更多更复杂的跳转，限制也比单纯的页面规则少

[BrandonStudio]

可以考虑换个域名？
比如 https://addr.domain/filepath 对应原始数据的URL设成 https://raw.addr.domain/filepath，用页面规则将后者转发成 https://addr.domain/api/raw/?path=/filepath

[MuZhou233]

感觉换了可能也会影响理解，所以增加了一段文字解释

[naicfeng]

可以参考一下next.js自带的路由功能

  async rewrites() {
    return {
      beforeFiles: [
        // These rewrites are checked after headers/redirects
        // and before all files including _next/public files which
        // allows overriding page files
        {
          source: '/api',
          destination: '/404',
        },
      ],
      afterFiles: [
        // These rewrites are checked after pages/public files
        // are checked but before dynamic routes
        {
          source: '/d/odpt/:odpt/:slug*',
          destination: '/api/raw/?path=/:slug*&odpt=:odpt',
        },
        {
          source: '/d/:slug*',
          destination: '/api/raw/?path=/:slug*',
        },
        {
          source: '/p/:size(large|medium|small)/:slug*',
          destination: '/api/thumbnail/?path=/:slug*&size=:size&proxy=true',
        },
        {
          source: '/p/:slug*',
          destination: '/api/thumbnail/?path=/:slug*&size=large&proxy=true',
        },
        {
          source: '/files/raw/:slug*',
          destination: '/api/raw/:slug*',
        },
        {
          source: '/files/:all*',
          destination: '/api/:all*',
        },
      ]
    }
  },

e.g.

https://wuyang.ws/p/%E5%9B%BE%E7%89%87/%E5%A6%B9%E5%AD%90%E5%9B%BE/2017062317353_5796/%E5%86%99%E7%9C%9F-3/3%20(1).jpg