CFPages-CacheRules

[TOC]

一、直接访问*.pages.dev默认域名

  1. 在source/目录下新建_headers配置文件（无拓展名），内容（注意缩进）如下，
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
# 为所有静态资源设置缓存策略
# 一年31536000，一周604800，一天86400

/search.xml
  Content-Type: application/xml
  Cache-Control: public, max-age=600, s-maxage=3600
  
/
  Cache-Control: public, max-age=600, s-maxage=3600
  
/posts/*
  Cache-Control: public, max-age=600, s-maxage=3600

/*.css
  Content-Type: text/css; charset=utf-8
  Cache-Control: public, max-age=86400, s-maxage=31536000

/*.js
  Content-Type: application/javascript
  Cache-Control: public, max-age=604800, s-maxage=31536000

/json/*
  Content-Type: application/json
  Cache-Control: public, max-age=604800, s-maxage=31536000

/icons/*
  Content-Type: image/webp
  Cache-Control: public, max-age=604800, s-maxage=31536000

（Cache-Control 的 max-age 是客户端缓存时间；s-maxage 是CDN 边缘节点（Cloudflare Edge）缓存时间；单位为“秒”。）

  1. 部署pages项目时,会自动应用 _headers配置文件中定义的缓存规则！
    CFPages项目根目录的headers配置生效

二、缓存规则优先级

若CFPages项目内 _headers文件中设置了 Cache-Control，并绑定了自定义域名，比如aa.com。即便该域名对应的CF面板中另行配置了“缓存规则”，也无效！
_headers 是 Cloudflare Pages 构建阶段通过Worker Runtime注入的，非传统源站头，优先级极高！
控制面板规则可覆盖`非

优先级 如下：

优先级来源类型
🥇 1. Cloudflare Workers 或 Pages Runtime（如 _headers 设置的 Cache-Control）CF Pages
🥈 2. 自定义 Worker 你手写的 response.headers.set()
🥉 3. 源站 HTTP 响应头（非 Pages）非CF Pages
⚪ 4. Cloudflare 缓存规则（Cache Rules）中设置“忽略缓存控制标头”+ TTL
⚪ 5. 页面规则中“缓存所有内容 + 边缘 TTL”设置（已被 Cache Rules 替代）

三、如何清除边缘缓存

*.pages.dev默认域名

*.pages.dev默认域名是 Cloudflare 拥有的共享域名，不在用户的 DNS 控制之下，用户没有清除缓存的权限，无法通过 Cloudflare 控制台或 API 强制清除边缘缓存，只有如下两种方法：

  1. 等待s-maxage自动过期;
  2. 重新部署项目（版本变更，会强制刷新边缘缓存）

CF管理的域名

由于该自定义域名在用户的 DNS 控制之下，除了以上两种方式，还可以直接通过Cloudflare 控制台或 API强制清除边缘缓存。

  1. 登录Cloudflare 控制台，点击对应区域的清除边缘缓存按钮，如下图。
    CF控制台清除边缘缓存
  2. 调用CF的 清理边缘缓存API。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
const axios = require('axios');
// 配置
const CLOUDFLARE_API_TOKEN = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
const CLOUDFLARE_ZONE_ID = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
const CLOUDFLARE_CACHE_API = `https://api.cloudflare.com/client/v4/zones/${CLOUDFLARE_ZONE_ID}/purge_cache`;

// 清理缓存
async function clearCache() {
  try {
    const response = await axios.post(
      CLOUDFLARE_CACHE_API,
      { purge_everything: true },
      {
        headers: {
          Authorization: `Bearer ${CLOUDFLARE_API_TOKEN}`,
          'Content-Type': 'application/json',
        },
      }
    );

    if (response.data.success) {
      console.log('Cloudflare 缓存(eamon.dpdns.org区域)已清理成功！');
    } else {
      console.error('缓存清理失败：', response.data.errors);
    }
  } catch (error) {
    console.error('清理缓存失败：', error.message);
  }
}