Добавьте пользовательские HTTP-заголовки

Более гибкую настройку заголовков HTTP можно выполнить с помощью Cloudflare Workers бессерверные функции ↗.

Если вы еще не развертывали Worker, начните работу с руководство. Для этого руководства выполните шаги с первого (регистрация аккаунта Workers) по четвертый (создание нового проекта), прежде чем вернуться на эту страницу.

Прежде чем продолжить, убедитесь, что ваш проект Cloudflare Pages подключён к пользовательский домен.

Написание функции Workers

Функции Workers написаны на JavaScript ↗. Когда Worker отправляет запрос к приложению Cloudflare Pages, он получает ответ. Полученный ответ является неизменяемым, то есть его нельзя изменить. Чтобы добавить, удалить или изменить заголовки, склонируйте ответ и измените заголовки в новом Response экземпляр. Верните новый ответ браузеру с нужными изменениями заголовков. Пример показан ниже:

Настройка пользовательских заголовков с помощью функции Workers

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;
	},
};

Развертывание функции Workers в панели управления

Проще всего начать развёртывание функции Workers, введя workers.new ↗ в браузере. Войдите в свою учётную запись, чтобы автоматически перейти в панель управления Workers & Pages. В панели управления Workers & Pages напишите свою функцию или используйте один из примеры из документации Workers.

Выберите Save and Deploy когда ваш скрипт готов, и задайте маршрут в настройках зоны вашего домена.

Например, вот скрипт Workers вы можете скопировать и вставить в панель управления Workers, который задает общие заголовки безопасности при каждом запросе к вашему URL Pages, такие как X-XSS-Protection, X-Frame-Options, X-Content-Type-Options, Strict-Transport-Security, Content-Security-Policy (CSP) и другие.

Развертывание функции Workers с помощью CLI

Если вы не хотите писать этот файл самостоятельно, используйте наш custom-headers-example шаблон ↗ чтобы сгенерировать новую функцию Workers с помощью wrangler, инструмент командной строки Workers.

Создание бессерверной функции с помощью wrangler

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

Чтобы Workers function работала вместе с приложением Pages, разверните её на том же пользовательском домене, что и приложение Pages. Для этого укажите в файле Wrangler вашего проекта данные учётной записи и зоны:

{
	"$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"

Если вы не знаете, как найти Account ID и Zone ID, ознакомьтесь с наше руководство.

После настройки конфигурационный файл Wrangler , выполните npx wrangler deploy в терминале, чтобы развернуть Worker:

npx wrangler deploy

После того как вы развернёте Worker, нужные изменения HTTP-заголовков вступят в силу. Пока Worker развёрнут, содержимое вашего приложения Pages должно отображаться как обычно.