Set custom HTTP response headers with an Edge Function

Use an Edge Function to add HTTP headers to any HTTP response.

import type { Context } from "@netlify/edge-functions";

export default async (request: Request, context: Context) => {
  const response = await context.next();
  response.headers.set("X-Your-Custom-Header", "A custom value");
  return response;
};

See this in action

Use the links below to navigate to versions of this page with or wothout the custom header, which you'll be able to inspect in your browser dev tools,

This page, without a custom HTTP response header
This page, but with a custom HTTP response header added
The Edge Function code: set-response-header.ts

Explore more examples

What are Edge Functions?

Using JavaScript and TypeScript, Netlify Edge Functions give you the power to modify network requests to localize content, serve relevant ads, authenticate visitors, A/B test content, and much more!

This all happens at the Edge — directly from the worldwide location closest to each user.

To use Edge Functions on Netlify, add JavaScript or TypeScript files to a /netlify/edge-functions directory in your project.

Learn more in the docs.

Deploy this site to Netlify

Try out Edge Functions on Netlify today! Click the button below to deploy this site with all of its demos to your Netlify account.