Настройка CORS-заголовков для скриптов в Express.js

Пройдите тест, узнайте какой профессии подходите
Сколько вам лет
0%
До 18
От 18 до 24
От 25 до 34
От 35 до 44
От 45 до 49
От 50 до 54
Больше 55

Быстрый ответ

Для установки HTTP-заголовков для статических файлов в Express.js ключевым является использование промежуточного программного обеспечения (middleware). Оно должно применять метод res.set() непосредственно перед отправкой файла. Чтобы сконфигурировать пользовательские заголовки для всех запросов к статическим файлам, используйте следующий код:

JS
Скопировать код
app.use('/assets', (req, res, next) => {
  res.set('Give-Me', 'Cookies'); // Express желает получить печенья
  next();
}, express.static('public'));

Этот код добавит заголовок "Give-Me": "Cookies" к каждому ответу сервера при запросе файлов из директории 'public'.

Пошаговый план для смены профессии

Сценарии конфигурации заголовков

Иногда возникает необходимость установить специфические заголовки для определённых ситуаций. Вот какие инструменты помогут вам справиться с подобными задачами.

Облегчение работы с CORS

Для более эффективной работы с политикой CORS используйте middleware cors, которое предоставляет гибкие настройки нужных заголовков:

JS
Скопировать код
const corsOptions = {
  origin: 'https://my.favorite.site', // Ваш излюбленный сайт
  optionsSuccessStatus: 200, // Всегда ожидаем статус 200
};

app.use('/assets', cors(corsOptions), express.static('public'));

Контроль над кешированием

Регулирование кеширования статических файлов возможно с помощью настройки заголовков Cache-Control:

JS
Скопировать код
app.use('/assets', (req, res, next) => {
  res.set('Cache-Control', 'public, max-age=86400'); // Длительное кеширование
  next();
}, express.static('public'));

Повышение уровня безопасности с помощью заголовков

Усилите безопасность приложения, используя заголовки, нацеленные на безопасность, например Content-Security-Policy (CSP). Пакет helmet будет полезным помощником в этом:

JS
Скопировать код
const helmet = require('helmet');
app.use(helmet.contentSecurityPolicy()); // Защищаемся с помощью helmet
app.use('/assets', express.static('public'));

Визуализация

Допустим, приложение Express.js — это склад, а HTTP-заголовок — это инструкция, прикрепленная к каждой коробке:

  • Склад Express.js (🏭): Место для хранения статических файлов
  • Получатель (📬): Браузер, запрашивающий файлы
  • Инструкция (📝): HTTP-заголовок

Переведем это в код с применением промежуточного программного обеспечения:

JS
Скопировать код
app.use(express.static('public', {
  setHeaders: (res, path) => {
    res.set('X-Package-Poster', 'Обращаться с осторожностью'); // Обратите внимание на хрупкость содержимого
  }
}));

Теперь каждый файл, передаваемый вами, будет сопровождаться пользовательским заголовком ответа, сообщающим браузеру о конкретных инструкциях.

Заголовки для улучшения работы приложения

Производительность приложения имеет критическое значение, и контролирование заголовков может оказать серьезное влияние на неё. Вы должны оптимизировать настройку заголовков для разнообразных операций и запросов.

Массовая установка заголовков

Чтобы установить несколько заголовков одновременно, передайте объект в метод res.set:

JS
Скопировать код
app.use('/assets', (req, res, next) => {
  res.set({
    'Child-One': 'ValueOne', // Первый заголовок 'Child-One'
    'Child-Two': 'ValueTwo', // Его брат 'Child-Two'
    // И многие другие
  });
  next();
}, express.static('public'));

Динамическая установка заголовков

В динамично меняющемся окружении динамические заголовки незаменимы. Изменяйте заголовки в соответствии с характеристиками запроса:

JS
Скопировать код
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, учитывая особенности их устройств:

JS
Скопировать код
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 — официальное руководство по разработке пользовательского промежуточного ПО.
Проверь как ты усвоил материалы статьи
Пройди тест и узнай насколько ты лучше других читателей
Какой код добавляет заголовок 'Give-Me' к каждому ответу сервера при запросе статических файлов?
1 / 5

Загрузка...