Modifying a Response Header

This example uses the Fetch API to implement a reverse proxy for the domain name of the site, and sets the HTTP response headers through Edge Functions to achieve CORS (Cross-Origin Resource Sharing).

Sample Code

async function handleRequest(event) {
  const { request } = event;
  const urlInfo = new URL(request.url);
  const proxyRequest = new Request(`${urlInfo.pathname}${}`, {
    method: request.method,
    body: request.body,
    headers: request.headers,
    copyHeaders: true,
  proxyRequest.headers.set('Host', '');
  // fetch reverse proxy
  const response = await fetch(proxyRequest);

  /** Add custom response headers **/
  // Specify which origins are allowed to access resources
  response.headers.append('Access-Control-Allow-Origin', '*');
  // Specify which HTTP methods (such as GET, POST, etc.) are allowed to access resources
  response.headers.append('Access-Control-Allow-Methods', 'GET,POST');
  // Specify which HTTP headers can appear in the request header
  response.headers.append('Access-Control-Allow-Headers', 'Authorization');
  // How long the result of the pre-flight request can be cached
  response.headers.append('Access-Control-Max-Age', '86400');
  /** Delete response headers **/
  return response;

addEventListener('fetch', event => {

Sample Preview

In the address bar of the browser, enter a URL that matches a trigger rule of the Edge Function to preview the effect of the sample code.



  1. Runtime APIs: Headers
  2. Runtime APIs: Response