← Cloudflare Pages / pages / how-to

Přidejte vlastní hlavičky HTTP

Pokročilejší přizpůsobení hlaviček HTTP je možné pomocí Cloudflare Workers bezserverové funkce ↗.

Pokud jste ještě nikdy nenasadili Worker, začněte s naším návod. Pro účely tohoto tutoriálu nejprve dokončete kroky jedna (Sign up for a Workers account) až čtyři (Generate a new project) a poté se vraťte na tuto stránku.

Než budete pokračovat, ujistěte se, že je váš projekt Cloudflare Pages připojen k vlastní doména.

Funkce Workers jsou napsané v JavaScript ↗. Když Worker odešle požadavek na aplikaci Cloudflare Pages, obdrží odpověď. Odpověď, kterou Worker obdrží, je neměnná, takže ji nelze upravovat. Pokud chcete hlavičky přidat, odstranit nebo změnit, naklonujte odpověď a upravte hlavičky u nové Response instanci. Novou odpověď se zvolenými změnami hlaviček vraťte prohlížeči. Příklad je uveden níže:

export default {
	async fetch(request) {
		// This proxies your Pages application under the condition that your Worker script is deployed on the same custom domain as your Pages project
		const response = await fetch(request);

		// Clone the response so that it is no longer immutable
		const newResponse = new Response(response.body, response);

		// Add a custom header with a value
		newResponse.headers.append(
			"x-workers-hello",
			"Hello from Cloudflare Workers",
		);

		// Delete headers
		newResponse.headers.delete("x-header-to-delete");
		newResponse.headers.delete("x-header2-to-delete");

		// Adjust the value for an existing header
		newResponse.headers.set("x-header-to-change", "NewValue");

		return newResponse;
	},
};

Nejjednodušší způsob, jak začít nasazovat funkci Workers, je zadat workers.new ↗ v prohlížeči. Přihlaste se ke svému účtu a budete automaticky přesměrováni na Workers & Pages dashboard. Na Workers & Pages dashboardu napište svou funkci nebo použijte jeden z příklady z dokumentace Workers.

Vyberte Save and Deploy až bude váš skript připravený, a nastavte trasa v nastavení zóny vaší domény.

Například zde je skript Workers si můžete zkopírovat do Workers dashboardu; nastaví běžné bezpečnostní hlavičky pokaždé, když požadavek dorazí na vaši URL adresu Pages, například X-XSS-Protection, X-Frame-Options, X-Content-Type-Options, Strict-Transport-Security, Content-Security-Policy (CSP) a další.

Pokud nechcete tento soubor psát sami, můžete použít náš custom-headers-example šablona ↗ a vygenerujte novou funkci Workers pomocí wrangler, nástroj Workers CLI.

git clone https://github.com/cloudflare/custom-headers-example
cd custom-headers-example
npm install

Chcete-li provozovat funkci Workers společně s aplikací Pages, nasaďte ji na stejnou vlastní doménu jako aplikaci Pages. Za tímto účelem aktualizujte v projektu soubor Wrangler o údaje o svém účtu a zóně:

{
	"$schema": "./node_modules/wrangler/config-schema.json",
	"name": "custom-headers-example",
	"account_id": "FILL-IN-YOUR-ACCOUNT-ID",
	"workers_dev": false,
	"route": "FILL-IN-YOUR-WEBSITE.com/*",
	"zone_id": "FILL-IN-YOUR-ZONE-ID"
}

"$schema" = "./node_modules/wrangler/config-schema.json"
name = "custom-headers-example"
account_id = "FILL-IN-YOUR-ACCOUNT-ID"
workers_dev = false
route = "FILL-IN-YOUR-WEBSITE.com/*"
zone_id = "FILL-IN-YOUR-ZONE-ID"

Pokud nevíte, jak najít své ID účtu a ID zóny, přečtěte si náš návod.

Jakmile máte nakonfigurované své Konfigurační soubor Wrangler , spusťte npx wrangler deploy ve svém terminálu, čímž nasadíte svého Workera:

npx wrangler deploy

Jakmile nasadíte Worker, požadované úpravy hlaviček HTTP se projeví. Zatímco je Worker nasazený, obsah aplikace Pages by se měl zobrazovat i nadále normálně.