Изучение CORS для простых запросов: методы и примеры кода

Обмен ресурсами между источниками (CORS) – это механизм, который позволяет запрашивать ресурсы на веб-странице из домена, отличного от домена самого ресурса. Эта функция безопасности применяется веб-браузерами для предотвращения доступа вредоносных сценариев к конфиденциальной информации. В этой статье мы углубимся в мир CORS для простых запросов, изучим различные методы и предоставим примеры кода, которые помогут вам понять и эффективно внедрить CORS.

Метод 1: использование заголовка Access-Control-Allow-Origin
Одним из распространенных методов обработки CORS для простых запросов является установка заголовка Access-Control-Allow-Origin на сервере. Этот заголовок определяет, каким источникам разрешен доступ к ресурсам. Вот пример того, как настроить заголовок, чтобы разрешить запросы из определенного источника:

// Node.js example
app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "https://example.com");
  next();
});

Метод 2: разрешение нескольких источников
Если вы хотите разрешить запросы из нескольких источников, вы можете использовать подстановочный знак «*», чтобы указать, что разрешен любой источник. Однако обратите внимание, что этот подход может представлять угрозу безопасности, если его использовать небрежно. Вот пример:

// Node.js example
app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  next();
});

Метод 3: обработка предварительных запросов
Для определенных типов запросов, известных как предварительные запросы, браузер отправляет на сервер дополнительный запрос OPTIONS, чтобы проверить, безопасно ли отправлять фактический запрос. Для обработки предполетных запросов вам необходимо включить на сервере соответствующие заголовки. Вот пример:

// Node.js example
app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "https://example.com");
  res.header("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
  res.header("Access-Control-Allow-Headers", "Content-Type");
  next();
});

Метод 4. Обработка файлов cookie с помощью CORS
По умолчанию CORS не включает файлы cookie в запросы между источниками. Чтобы включить файлы cookie, вам необходимо установить для параметра credentialsзначение «включать» как на стороне клиента, так и на стороне сервера. Вот пример использования Fetch API JavaScript:

fetch('https://api.example.com/data', {
  credentials: 'include'
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

Совместное использование ресурсов из разных источников (CORS) — это важный механизм безопасности для обработки запросов из разных источников. В этой статье мы рассмотрели различные методы обработки CORS для простых запросов, попутно предоставляя примеры кода. Поняв и внедрив эти методы, вы сможете обеспечить безопасность и доступность своих веб-приложений.