使用 Cloudflare Workers 代理 Gravatar 解决 wordpress 头像不显示问题

最近发现几个网站的 Gravatar 头像都打不开，之前用的国内的源也打不开，导致页面很难看，这里使用 Cloudflare Workers 部署一个 Gravatar 的代理自用，以后都不用再担心这个问题了。

以下 Cloudflare Workers 部署脚本包含以下功能：

1. 设置域名白名单，不在白名单内的域名返回403，防止被盗用导致 Cloudflare Workers 流量暴增要付费。
2. 设置头像缓存，避免不必要的流量消耗并加快页面加载；
3. 禁止直接访问 Gravatar 主页；
4. 直接浏览器访问可以访问头像；

完整部署脚本：

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

async function handleRequest(request) {
  const allowedDomains = [
    // 添加你允许使用这个代理的网站，防止被刷流量
    'https://your_domain'
  ];

  const referer = request.headers.get('Referer');
  const origin = request.headers.get('Origin');

  // ✅ 如果是直接在浏览器访问（无 Referer 和 Origin） → 允许
  if (!referer && !origin) {
    return await proxyGravatar(request);
  }

  // ✅ 如果 Referer 或 Origin 属于允许列表 → 允许
  const isAllowed = allowedDomains.some(domain =>
    (referer && referer.startsWith(domain)) ||
    (origin && origin.startsWith(domain))
  );

  if (isAllowed) {
    return await proxyGravatar(request);
  }

  // ❌ 否则拒绝请求
  return new Response('Not allowed', { status: 403 });
}

async function proxyGravatar(request) {
  const url = new URL(request.url);

  // 拒绝访问根路径
  if (url.pathname === '/') {
    return new Response('Home page access not allowed.', { status: 500 });
  }

  // 构建 Gravatar 原始头像地址
  const gravatarUrl = new URL(url.pathname + url.search, 'https://secure.gravatar.com');

  // 发起请求，允许 CDN 缓存
  const response = await fetch(gravatarUrl, {
    cf: {
      cacheEverything: true,
      cacheTtl: 86400 // 缓存 1 天
    },
    headers: {
      'User-Agent': 'Cloudflare-Worker-Avatar-Proxy'
    }
  });

  const contentType = response.headers.get('content-type') || 'application/octet-stream';
  const buffer = await response.arrayBuffer();

  const headers = new Headers();
  headers.set('Content-Type', contentType);
  // 缓存1年，考虑换头像实时更新的问题
  headers.set('Cache-Control', 'public, max-age=86400');

  return new Response(buffer, {
    status: response.status,
    headers
  });
}

记得在下面这个地方改成你允许使用这个的域名白名单：

  const allowedDomains = [
    // 添加你允许使用这个代理的网站，防止被刷流量
    'https://your_domain'
  ];

使用部署脚本在 Cloudflare Workers 部署好之后，绑定你的自定义域名，就可以直接访问了，可以通过浏览器访问一个头像地址验证一下。

如果你使用 wordpress，在你的主题 function.php 中添加以下代码把 Gravatar 的请求替换到你部署好的 Cloudflare Workers 自定义域名，代码中假设你的自定义域名是 avatar.test.com，就可以正常显示头像了。

if ( ! function_exists( 'get_cf_gravatar_url' ) ) {
    function get_cf_gravatar_url( $url ) {
        $sources = array(
            'www.gravatar.com',
            '0.gravatar.com',
            '1.gravatar.com',
            '2.gravatar.com',
            'secure.gravatar.com',
            'cn.gravatar.com',
            'gravatar.com',
        );
        return str_replace( $sources, 'avatar.test.com', $url );
    }
    add_filter( 'um_user_avatar_url_filter', 'get_cf_gravatar_url', 1 );
    add_filter( 'bp_gravatar_url', 'get_cf_gravatar_url', 1 );
    add_filter( 'get_avatar_url', 'get_cf_gravatar_url', 1 );
}