使用 cloudflare workers 代理访问 google photos

本文最后更新于：2023年4月21日凌晨

场景

吾辈使用 Google Photos 作为个人相册，但它的外链却无法在 blog 中使用，而且也无法在国内直接访问，这其实有点麻烦。在此之前，吾辈通过使用外链图片的时候报 403 怎么处理？了解到 https://images.weserv.nl 服务，它可以通过 cloudflare cdn 代理访问原本无法直接访问的图片。使用上也很简单，只要在 https://images.weserv.nl?url= 加上原本图片的路径即可。
但在今天偶然一次打开 blog 的时候发现，通过 weserv 外链的图片加载很慢，数量比较多时甚至需要几分钟才能全部加载完成，这是不能忍受的。

解决

cloudflare workers 的免费层每天最多允许 10w 次请求，对于吾辈这种流量很小的网站完全可以接受。

于是，吾辈想到了利用 cloudflare workers 代理的方法，它的基本思路与 weserv 类似，但不再使用它的服务，而是直接使用 cloudflare 代理。lambda 函数实现很简单，就是透传 url 参数罢了。

import useReflare from 'reflare'
import { Route } from 'reflare/dist/types'

const handleRequest = async (request: Request): Promise<Response> => {
  const u = new URL(request.url)
  const url = u.searchParams.get('url')
  if (!url) {
    return new Response('Missing url', {
      status: 400,
      statusText: 'Missing url',
    })
  }
  const reflare = await useReflare()
  const route: Route = {
    upstream: {
      domain: new URL(url).host,
    },
  }
  reflare.push(route)
  return reflare.handle(new Request(url, request))
}

addEventListener('fetch', (event) => {
  event.respondWith(handleRequest(event.request))
})

你可以按照项目 https://github.com/rxliuli/cloudflare-proxy 的步骤自行部署

部署上去之后，再配置一下自定义路由。于是，吾辈便有了一个基本的图片访问代理 https://image-proxy.rxliuli.com。可以检查另一篇终之空通关感想，它已经在使用这个代理服务了。

对比

使用之后，图片加载速度变得看起来还不错。

直接使用 curl 访问单张图片它们看起来差距没那么大，但在浏览器中同时加载多张图片的体验却截然不同。下面是使用 curl 的对比

$ time curl https://image-proxy.rxliuli.com/?url=https://lh3.googleusercontent.com/pw/AL9nZEUmvKBtRxGeG-J-0oVDVmdZccu0E0_HiDHaMPlvWBLp1v2wjaA152s9FxkIRFZROAChN-tYgimcK-ZYBFD_KGya40RzSKfDTVJqvoXjg5CsBmAaJPurSPdDmaDm6Bcunj4IxL_YPBnwtH0h7XdwaUxN=w1600-h1200-no

real    0m1.951s
user    0m0.000s
sys     0m0.000s

$ time curl https://images.weserv.nl/?url=https://lh3.googleusercontent.com/pw/AL9nZEUmvKBtRxGeG-J-0oVDVmdZccu0E0_HiDHaMPlvWBLp1v2wjaA152s9FxkIRFZROAChN-tYgimcK-ZYBFD_KGya40RzSKfDTVJqvoXjg5CsBmAaJPurSPdDmaDm6Bcunj4IxL_YPBnwtH0h7XdwaUxN=w1600-h1200-no

real    0m4.584s
user    0m0.000s
sys     0m0.000s