边缘开发者平台
  • 边缘函数
    • 概述
    • 快速指引
    • 操作指引
      • 函数管理
      • 触发配置
    • Runtime APIs
      • addEventListener
      • Cache
      • Cookies
      • Encoding
      • Fetch
      • FetchEvent
      • Headers
      • Request
      • Response
      • Streams
        • ReadableStream
        • ReadableStreamBYOBReader
        • ReadableStreamDefaultReader
        • TransformStream
        • WritableStream
        • WritableStreamDefaultWriter
      • Web Crypto
      • Web standards
      • Images
        • ImageProperties
    • 示例函数
      • 返回 HTML 页面
      • 返回 JSON
      • Fetch 远程资源
      • 请求头鉴权
      • 修改响应头
      • AB 测试
      • 设置 Cookie
      • 基于请求区域重定向
      • Cache API 使用
      • 缓存 POST 请求
      • 流式响应
      • 合并资源流式响应
      • 防篡改校验
      • m3u8 改写与鉴权
      • 图片自适应缩放
      • 图片自适应 WebP
      • 自定义 Referer 限制规则
      • 远程鉴权
      • HMAC 数字签名
      • 自定义下载文件名
      • 获取客户端 IP
    • 最佳实践
      • 通过边缘函数实现自适应图片格式转换

缓存 POST 请求

该示例对 POST 请求 body 计算 SHA-256 签名,作为缓存 key 的一部分,并使用 Cache API 将响应内容进行缓存,若存在缓存,则使用缓存内容响应客户端,否则使用 Fetch API 发起子请求获取远程资源。实现了,使用边缘函数缓存 POST 请求。

示例代码

function uint8ArrayToHex(arr) {
return Array.prototype.map.call(arr, (x) => (('0' + x.toString(16)).slice(-2))).join('');
}

// sha256 签名摘要
async function sha256(message) {
const msgBuffer = new TextEncoder().encode(message);
const hashBuffer = await crypto.subtle.digest('SHA-256', msgBuffer);

return uint8ArrayToHex(new Uint8Array(hashBuffer));
}

async function fetchContent(event, cacheKey) {
const cache = caches.default;

// 缓存没有命中,回源并使用缓存
const response = await fetch(event.request);

// 在响应头添加 Cahe-Control,设置缓存时长
response.headers.set('Cache-Control', 's-maxage=10');
event.waitUntil(cache.put(cacheKey, response.clone()));

// 未命中缓存,设置响应头标识
response.headers.append('x-edgefunctions-cache', 'miss');

return response;
}

async function handleRequest(event) {
const request = event.request;
const body = await request.clone().text();

// // 根据 request body 计算 hash
const hash = await sha256(body);

// request body 计算的 hash 值作为 cacheKey 的一部分
const cacheKey = `${request.url}${hash}`;

const cache = caches.default;

try {
// 获取关联的缓存 Response
let response = await cache.match(cacheKey);

if (!response) {
return fetchContent(event, cacheKey);
}

// 命中缓存,设置响应头标识
response.headers.append('x-edgefunctions-cache', 'hit');

return response;
} catch (error) {
await cache.delete(cacheKey);
// 缓存过期或不存在,重新获取远程资源
return fetchContent(event, cacheKey);
}

return response;
}

addEventListener('fetch', (event) => {
try {
const request = event.request;
// 处理 POST 请求
if (request.method.toUpperCase() === 'POST') {
return event.respondWith(handleRequest(event));
}
// 非post 请求
return event.respondWith(fetch(request));
} catch (e) {
return event.respondWith(new Response('Error thrown ' + e.message));
}
});

示例预览

在浏览器地址栏中输入匹配到边缘函数触发规则的 URL,即可预览到示例效果。
未命中缓存。

命中缓存。


相关参考