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

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

Метод 1: настройка на стороне сервера

Один из способов внести в белый список несколько доменов — настроить сервер на разрешение определенных источников. Сервер отправляет заголовок ответа под названием «Access-Control-Allow-Origin», в котором указаны разрешенные источники.

Пример (Node.js с Express):

const express = require('express');
const app = express();
const allowedOrigins = ['https://example.com', 'https://example2.com'];
app.use((req, res, next) => {
  const origin = req.headers.origin;
  if (allowedOrigins.includes(origin)) {
    res.setHeader('Access-Control-Allow-Origin', origin);
  }
  next();
});
// Rest of your server code

Метод 2. Подстановочный знак “*”

Если вы хотите разрешить запросы из любого домена, вы можете использовать подстановочный знак «*» в заголовке «Access-Control-Allow-Origin». Однако будьте осторожны, поскольку такой подход может поставить под угрозу безопасность.

Пример (Node.js с Express):

const express = require('express');
const app = express();
app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  next();
});
// Rest of your server code

Метод 3: динамический белый список

В некоторых случаях вам может потребоваться динамически определять разрешенные источники на основе определенных условий. Этого можно добиться, динамически генерируя значение заголовка «Access-Control-Allow-Origin» в серверном коде.

Пример (Node.js с Express):

const express = require('express');
const app = express();
app.use((req, res, next) => {
  const origin = req.headers.origin;
  // Check conditions and dynamically set the allowed origin
  const allowedOrigin = determineAllowedOrigin(origin);
  res.setHeader('Access-Control-Allow-Origin', allowedOrigin);
  next();
});
// Rest of your server code

Метод 4. Предварительные запросы

Для некоторых типов запросов, например с настраиваемыми заголовками или методами HTTP, отличными от GET, POST или HEAD, браузер отправляет предварительный запрос с методом HTTP OPTIONS, чтобы проверить, разрешает ли сервер фактический запрос. Вам необходимо обработать эти предварительные запросы и отправить соответствующие заголовки CORS.

Пример (Node.js с Express):

const express = require('express');
const app = express();
app.options('/endpoint', (req, res) => {
  res.setHeader('Access-Control-Allow-Origin', 'https://example.com');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  res.sendStatus(204);
});
app.post('/endpoint', (req, res) => {
  // Process the actual request
});
// Rest of your server code

В этой статье мы рассмотрели несколько методов внесения нескольких доменов в белый список в политике CORS. Настраивая серверный код и устанавливая соответствующие заголовки ответов, вы можете контролировать, каким доменам разрешено отправлять запросы к вашему веб-приложению из разных источников. Не забывайте учитывать последствия для безопасности и выбирайте метод, который лучше всего соответствует требованиям вашего приложения.

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