Edge Developer Platform
  • Edge Functions
    • Overview
    • Getting Started
    • Operation Guide
      • Function Management
      • Function Trigger
    • Runtime APIs
      • addEventListener
      • Cache
      • Cookies
      • Encoding
      • Fetch
      • FetchEvent
      • Headers
      • Request
      • Response
      • Streams
        • ReadableStream
        • ReadableStreamBYOBReader
        • ReadableStreamDefaultReader
        • TransformStream
        • WritableStream
        • WritableStreamDefaultWriter
      • Web Crypto
      • Web standards
      • Images
        • ImageProperties
    • Sample Functions
      • Returning an HTML Page
      • Returning a JSON Object
      • Fetch Remote Resources
      • Authenticating a Request Header
      • Modifying a Response Header
      • Performing an A/B Test
      • Setting Cookies
      • Performing Redirect Based on the Request Location
      • Using the Cache API
      • Caching POST Requests
      • Responding in Streaming Mode
      • Merging Resources and Responding in Streaming Mode
      • Protecting Data from Tampering
      • Rewriting a m3u8 File and Configuring Authentication
      • Adaptive Image Resize
      • Image Adaptive WebP
      • Customize Referer restriction rules
      • Remote Authentication
      • HMAC Digital Signature
      • Naming a Downloaded File
      • Obtaining Client IP Address
    • Best Practices
      • Adaptive Image Format Conversion via Edge Functions

Modifying a Response Header

This example uses the Fetch API to implement a reverse proxy for the domain name www.example.com 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(`https://www.example.com${urlInfo.pathname}${urlInfo.search}`, {
method: request.method,
body: request.body,
headers: request.headers,
copyHeaders: true,
});
proxyRequest.headers.set('Host', 'www.example.com');
// 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 **/
response.headers.delete('X-Cache');
return response;
}

addEventListener('fetch', event => {
event.respondWith(handleRequest(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.


References