Настройка 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); // Для пользователей ПК
  }
});

Полезные материалы

1. Справочник API Express 4.x — полный гайд по методам ответов в Express.js.
2. HTTP-заголовки | MDN — детальная информация о HTTP-заголовках и их применении.
3. Возможности Express при работе со статическими файлами — узнайте, как эффективно управлять статическими файлами.
4. helmet – npm — защитите приложение с помощью этого пакета для внедрения заголовков безопасности.
5. Страница helmetjs/helmet на GitHub — страница пакета Helmet на GitHub.
6. Страница expressjs/cors на GitHub — всё о CORS middleware для Express.js в одном месте.
7. Руководство по созданию промежуточного ПО для Express — официальное руководство по разработке пользовательского промежуточного ПО.