tencent cloud

Feedback

Modifying a Response Header

Last updated: 2023-11-24 15:10:13
    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

    Contact Us

    Contact our sales team or business advisors to help your business.

    Technical Support

    Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

    7x24 Phone Support