CORS: определение, синтаксис и примеры

CORS (Cross-Origin Resource Sharing) — механизм браузерной безопасности, который контролирует запросы с одного домена на другой. Сервер через заголовок Access-Control-Allow-Origin явно указывает, какие origin'ы могут получать данные. Без корректного CORS JavaScript из example.com не сможет fetch'нуть api.another.com.

Используйте инструмент Enterno.io — введите домен, получите результат за 1-2 секунды. Бесплатно, без регистрации.

Проверить →

CORS (Cross-Origin Resource Sharing) — это механизм, который позволяет ограничивать доступ к ресурсам веб-сайта из других доменов. Он обеспечивает безопасность, позволяя браузерам контролировать, какие домены могут взаимодействовать с ресурсами на сервере. CORS используется для предотвращения атак, таких как XSS (межсайтовый скриптинг). Например, если ваш сайт находится на https://example.com, а вы хотите, чтобы ресурсы из https://api.example.com были доступны, необходимо правильно настроить CORS заголовки на сервере.

CORS работает через использование HTTP-заголовков, которые определяют, какие домены имеют право на доступ к ресурсам. Основные заголовки CORS включают:

• Access-Control-Allow-Origin: указывает, какие домены могут получать доступ к ресурсам. Например, Access-Control-Allow-Origin: https://example.com разрешает доступ только с этого домена.
• Access-Control-Allow-Methods: определяет, какие HTTP-методы (GET, POST и т.д.) разрешены для кросс-доменных запросов.
• Access-Control-Allow-Headers: указывает, какие заголовки могут быть использованы в запросе.

Когда браузер инициирует кросс-доменный запрос, он отправляет предварительный запрос (preflight request) методом OPTIONS. Сервер должен ответить соответствующими заголовками CORS, чтобы браузер продолжил основную операцию.

Настройка CORS зависит от используемого серверного ПО. Рассмотрим пример настройки CORS на сервере, работающем на Node.js с использованием Express.

const express = require('express');
const cors = require('cors');

const app = express();

// Настройка CORS
app.use(cors({
  origin: 'https://example.com', // Разрешаем доступ с этого домена
  methods: ['GET', 'POST'], // Разрешаем только эти методы
  allowedHeaders: ['Content-Type', 'Authorization'] // Разрешаем только эти заголовки
}));

app.get('/data', (req, res) => {
  res.json({ message: 'Hello from CORS-enabled server!' });
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

В данном примере мы используем пакет cors, который упрощает настройку CORS в Express. Мы указываем, что доступ разрешён только с https://example.com, а также ограничиваем доступные методы и заголовки. После этого сервер будет корректно обрабатывать кросс-доменные запросы.

CORS (Cross-Origin Resource Sharing) — это механизм, который позволяет ограничить доступ к ресурсам на веб-сервере из других доменов. Он используется для обеспечения безопасности веб-приложений, позволяя браузерам контролировать, какие запросы могут выполняться между разными доменами. Чтобы настроить CORS, необходимо использовать заголовки HTTP, такие как Access-Control-Allow-Origin, Access-Control-Allow-Methods и Access-Control-Allow-Headers. Например, для разрешения запросов с домена https://example.com можно использовать следующий заголовок: Access-Control-Allow-Origin: https://example.com.

Настройка CORS может различаться в зависимости от используемого веб-сервера или фреймворка. Рассмотрим несколько примеров настройки CORS для популярных технологий.

1. Настройка CORS в Express.js

Express.js — популярный фреймворк для Node.js. Для настройки CORS в Express можно использовать пакет cors. Установите его с помощью npm:

npm install cors

Затем подключите его в вашем приложении:

const cors = require('cors');
const express = require('express');
const app = express();

app.use(cors()); // Разрешает все домены

Если нужно разрешить только определенные домены, например, https://example.com, используйте следующий код:

app.use(cors({ origin: 'https://example.com' }));

2. Настройка CORS в Apache

Для настройки CORS на сервере Apache необходимо добавить соответствующие заголовки в файл конфигурации или в файл .htaccess. Например:

Header set Access-Control-Allow-Origin "https://example.com"
Header set Access-Control-Allow-Methods "GET, POST, OPTIONS"
Header set Access-Control-Allow-Headers "Content-Type, Authorization"

Этот код разрешает запросы с домена https://example.com и поддерживает методы GET, POST и OPTIONS.

3. Настройка CORS в Nginx

Для настройки CORS в Nginx добавьте следующие строки в конфигурационный файл вашего сайта:

add_header 'Access-Control-Allow-Origin' 'https://example.com';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';

Эти строки обеспечивают доступ к ресурсам только для указанного домена.

4. Проверка настроек CORS

После настройки CORS важно проверить, правильно ли работают заголовки. Для этого можно использовать инструменты разработчика в браузере. Откройте вкладку Network, выполните запрос к вашему API и посмотрите на заголовки ответа. Убедитесь, что заголовок Access-Control-Allow-Origin присутствует и содержит ожидаемое значение.

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