Настройка CORS-заголовков для скриптов в Express.js
Быстрый ответ
Для установки HTTP-заголовков для статических файлов в Express.js ключевым является использование промежуточного программного обеспечения (middleware). Оно должно применять метод res.set()
непосредственно перед отправкой файла. Чтобы сконфигурировать пользовательские заголовки для всех запросов к статическим файлам, используйте следующий код:
app.use('/assets', (req, res, next) => {
res.set('Give-Me', 'Cookies'); // Express желает получить печенья
next();
}, express.static('public'));
Этот код добавит заголовок "Give-Me": "Cookies"
к каждому ответу сервера при запросе файлов из директории 'public'
.
Сценарии конфигурации заголовков
Иногда возникает необходимость установить специфические заголовки для определённых ситуаций. Вот какие инструменты помогут вам справиться с подобными задачами.
Облегчение работы с CORS
Для более эффективной работы с политикой CORS используйте middleware cors
, которое предоставляет гибкие настройки нужных заголовков:
const corsOptions = {
origin: 'https://my.favorite.site', // Ваш излюбленный сайт
optionsSuccessStatus: 200, // Всегда ожидаем статус 200
};
app.use('/assets', cors(corsOptions), express.static('public'));
Контроль над кешированием
Регулирование кеширования статических файлов возможно с помощью настройки заголовков Cache-Control
:
app.use('/assets', (req, res, next) => {
res.set('Cache-Control', 'public, max-age=86400'); // Длительное кеширование
next();
}, express.static('public'));
Повышение уровня безопасности с помощью заголовков
Усилите безопасность приложения, используя заголовки, нацеленные на безопасность, например Content-Security-Policy (CSP)
. Пакет helmet
будет полезным помощником в этом:
const helmet = require('helmet');
app.use(helmet.contentSecurityPolicy()); // Защищаемся с помощью helmet
app.use('/assets', express.static('public'));
Визуализация
Допустим, приложение Express.js — это склад, а HTTP-заголовок — это инструкция, прикрепленная к каждой коробке:
- Склад Express.js (🏭): Место для хранения статических файлов
- Получатель (📬): Браузер, запрашивающий файлы
- Инструкция (📝): HTTP-заголовок
Переведем это в код с применением промежуточного программного обеспечения:
app.use(express.static('public', {
setHeaders: (res, path) => {
res.set('X-Package-Poster', 'Обращаться с осторожностью'); // Обратите внимание на хрупкость содержимого
}
}));
Теперь каждый файл, передаваемый вами, будет сопровождаться пользовательским заголовком ответа, сообщающим браузеру о конкретных инструкциях.
Заголовки для улучшения работы приложения
Производительность приложения имеет критическое значение, и контролирование заголовков может оказать серьезное влияние на неё. Вы должны оптимизировать настройку заголовков для разнообразных операций и запросов.
Массовая установка заголовков
Чтобы установить несколько заголовков одновременно, передайте объект в метод res.set
:
app.use('/assets', (req, res, next) => {
res.set({
'Child-One': 'ValueOne', // Первый заголовок 'Child-One'
'Child-Two': 'ValueTwo', // Его брат 'Child-Two'
// И многие другие
});
next();
}, express.static('public'));
Динамическая установка заголовков
В динамично меняющемся окружении динамические заголовки незаменимы. Изменяйте заголовки в соответствии с характеристиками запроса:
app.use('/assets', (req, res, next) => {
res.set('Super-Powered-By', 'Express'); // Сила Express скрыта здесь
if (req.is('json')) {
res.set('Content-Type', 'application/json'); // Для JSON-запросов
}
next();
}, express.static('public'));
Индивидуальная подборка файлов для пользователей
Выделяйте файлы индивидуально для каждого пользователя с помощью умного middleware, учитывая особенности их устройств:
app.use('/assets', (req, res, next) => {
if (req.headers['user-agent'].includes('Mobile')) {
res.set('Content-Type', 'text/css'); // Для мобильных пользователей
express.static('public/mobile')(req, res, next);
} else {
express.static('public/desktop')(req, res, next); // Для пользователей ПК
}
});
Полезные материалы
- Справочник API Express 4.x — полный гайд по методам ответов в Express.js.
- HTTP-заголовки | MDN — детальная информация о HTTP-заголовках и их применении.
- Возможности Express при работе со статическими файлами — узнайте, как эффективно управлять статическими файлами.
- helmet – npm — защитите приложение с помощью этого пакета для внедрения заголовков безопасности.
- Страница helmetjs/helmet на GitHub — страница пакета Helmet на GitHub.
- Страница expressjs/cors на GitHub — всё о CORS middleware для Express.js в одном месте.
- Руководство по созданию промежуточного ПО для Express — официальное руководство по разработке пользовательского промежуточного ПО.