通过边缘函数实现 CDN 回源的两种方式：Fetch与Passthrough
本篇文档学习预计需要10分钟，通过学习该文档，您可以了解到：
1. 为什么需要了解 CDN 回源的不同方式？
2. 基于边缘函数的 Fetch 与Passthrough 回源方式的适用场景。
3. EdgeOne 边缘函数实现 Fetch 与 Passthrough 回源的具体步骤。
背景介绍
如果您的网站或应用使用了 CDN 加速服务，您可能希望根据不同的业务需求灵活控制回源方式。EdgeOne 边缘函数为您提供了两种回源方式：Fetch 和Passthrough。
Fetch 方式允许您完全控制请求和响应内容，适合需要定制化处理的场景。当用户请求到达边缘节点时，边缘函数可以识别用户的设备类型、地理位置等信息，并在回源请求中添加相应的自定义头部发送到源站。源站根据这些信息返回相应的响应内容后，边缘函数还可以对源站响应进行进一步处理，如添加自定义响应头部、修改响应体等，最终将处理后的响应返回给客户端。
Passthrough 方式则直接透传请求，性能开销更低，适合不需要修改的大量请求。例如视频分享平台的视频文件请求、软件下载服务的大文件请求等静态资源场景。相比 Fetch 方式，Passthrough 不会创建额外的请求和响应对象从而能够显著降低内存占用和网络流量消耗，在高并发访问时效果尤为明显。
适用场景
Fetch 方式适用场景
1. 需要根据用户信息（设备类型、地理位置等）定制化处理请求。
2. 需要添加或修改请求头部信息。
3. 需要对源站响应进行二次处理。
Passthrough 方式适用场景
1. 需要大量静态资源的请求（图片、CSS、JavaScript 文件等）。
2. 需要高并发且不需要修改的请求。
3. 追求低延迟和资源消耗的请求场景。
操作步骤
步骤1：接入 EdgeOne
步骤2：创建并配置边缘函数
1. 登录 边缘安全加速平台 EO 控制台，在左侧菜单栏中，进入服务总览，单击网站安全加速内需配置的站点。
2. 在左侧导航栏中，单击边缘函数 > 函数管理。
3. 在函数管理页面，单击新建函数。
4. 在选择模板创建页面，单击创建 Hello World 后，单击下一步。
5. 在新建函数页面，输入函数名称、函数描述和函数代码。以下为边缘函数实现 CDN 回源的两种方式：Fetch 与 Passthrough 示例代码：
async function handleEvent(event) {const { request } = event;const url = new URL(request.url);// Fetch 方式回源示例：获取资源 A 并设置自定义响应头if (url.pathname.startsWith('/example/')) {const response = await fetch(request);// 设置自定义响应头response.headers.set('X-Processed-By', 'EdgeFunction-Fetch');return event.respondWith(response);}// Passthrough 方式回源：直接透传请求获取资源Bif (url.pathname.startsWith('/static/')) {// 请求将透传到源站return;}// 默认使用 Passthrough 方式return;}addEventListener('fetch', event => {handleEvent(event);});
步骤3：配置并部署边缘函数的触发规则
1. 编辑完成函数后，单击创建并部署，函数部署后，可直接单击新增触发规则，前往配置该函数的触发规则。
2. 在函数触发规则中，配置该函数的触发条件，根据当前的场景需求，您可以配置多条触发条件，以 And 逻辑触发。
此处仅配置该请求 HOST 等于
example.com 。当请求 URL 同时符合以上条件时，将触发步骤1中的边缘函数，实现 CDN 回源的两种方式：Fetch 与 Passthrough。
3. 单击确定触发规则即可生效。
步骤4：验证部署效果
以 Chrome 浏览器为例，当客户端发起请求时，边缘节点上的边缘函数会根据请求的 URL 路径决定使用哪种回源方式：
Fetch 回源方式：
Passthrough 回源方式：在该实践中请求直接透传到源站，边缘函数不会修改请求或响应。
