Docs Overview/
Two Ways to Implement CDN Origin-pull Via Edge Function: Fetch and Passthrough/

Two Ways to Implement CDN Origin-pull Via Edge Function: Fetch and Passthrough

This document study is expected to take 10 minutes. By studying this document, you can learn:
1. Why it is needed to understand different methods of CDN origin-pull?
2. Use cases of Fetch and Passthrough back-to-source methods based on edge function.
3. Specific steps to implement Fetch and Passthrough origin-pull with EdgeOne edge function.

Overview

If your website or application uses a CDN acceleration service, you may want flexible control over the back-to-source method according to different business needs. EdgeOne edge function offers two back-to-source methods: Fetch and Passthrough.
The Fetch method allows you full control over request and response content, suitable for scenarios requiring customization. When a user request reaches an edge node, the edge function can identify the user's device type, location, etc., and add appropriate custom headers to the origin-pull request sent to the origin server. After the origin server returns the corresponding response content based on this information, the edge function can perform further processing on the origin response, such as adding custom response headers or modifying the response body, before returning the processed response to the client.
The Passthrough method directly forwards requests with lower overhead, suitable for a large number of requests that do not require modification. Examples include video file requests for video sharing platforms, large file requests for software download services, and other static resource scenarios. Compared with the Fetch method, Passthrough does not create additional request and response objects, thereby significantly reducing memory usage and network traffic consumption, with particularly clear effects during high-concurrency access.

Applicable Scenarios

Fetch Method Use Cases

1. Process requests based on user information (device type, location, etc.) with customization.
2. Add or modify request header information.
3. Post-process the origin server response.

Passthrough Method Use Cases

1. Requests for a large number of static resources (images, CSS, JavaScript files).
2. High-concurrency requests that do not need to be modified.
3. Request scenarios that pursue low delay and resource consumption.

Operation Steps

Step 1: EdgeOne Integration

Refer to Quick Start with EdgeOne Integration from Scratch, complete site access and domain name access.

Step 2: Creating and Configuring an Edge Function

1. Log in to the Tencent Cloud EdgeOne console, enter Service Overview in the left menu bar, and click the site to be configured under Website Security Acceleration.
2. In the left sidebar, click Edge Function > Function Management.
3. On the function management page, click Create Function.
4. On the select template to create page, click Create Hello World, then click Next.
5. On the function creation page, enter function name, function description and function code. Below are two ways to implement CDN origin-pull via edge function: Fetch and Passthrough example code:
  async function handleEvent(event) {
  const { request } = event;
  const url = new URL(request.url);

  // Fetch origin-pull example: obtain resource A and set custom response header
  if (url.pathname.startsWith('/example/')) {
    const response = await fetch(request);
    
    response.headers.set('X-Processed-By', 'EdgeFunction-Fetch');
    response.headers.set('X-Processed-By', 'EdgeFunction-Fetch');
    
    return event.respondWith(response);
  }

  // Passthrough origin-pull: directly passthrough request to obtain resource B
  if (url.pathname.startsWith('/static/')) {
    // Request will be passed through to the origin server
    return;
  }

  // Use Passthrough method by default
  return;
}

addEventListener('fetch', event => {
  handleEvent(event);
});

Step 3: Configuring and Deploying the Edge Function Trigger Rule

1. After editing the function, click Create and Deploy. Once the function is deployed, directly click Add trigger rule to configure the trigger rule for the function.



2. In the function trigger rule, configure the trigger condition for the function. Based on current scenario requirements, you can configure multiple trigger conditions with And Logic Trigger.
Configure the request HOST equal to example.com here.
When the request URL meets all the above conditions, it will trigger the edge function in procedure 1, implementing two ways of CDN origin-pull: Fetch and Passthrough.



3. Click Confirm to make the trigger rule take effect.

Step 4: Verify Deployment Effect

Using Google Chrome Browser as an example, when a client initiates a request, the edge function on the edge node will decide to use the back-to-source method based on the URL path.
Fetch back-to-source method



Passthrough back-to-source method: In this practice, requests are directly passed through to the origin server, and edge functions will not modify the request or response.




Learn More

Runtime APIs:Fetch
Runtime APIs:Response