Что такое CORS (Cross-Origin Resource Sharing)?

«Что такое CORS (Cross-Origin Resource Sharing)?» — вопрос из категории Сети, который задают на 28% собеседований PHP Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

CORS (Cross-Origin Resource Sharing) — это механизм безопасности, реализованный в браузерах, который позволяет веб-странице, загруженной с одного домена (origin), запрашивать ресурсы с другого домена, если сервер явно разрешает такие запросы. Без CORS браузер по умолчанию блокирует межсайтовые (cross-origin) HTTP-запросы, инициированные скриптами (например, через fetch или XMLHttpRequest).

Как это работает на практике:

  1. Простой запрос (Simple Request): Для GET, POST (с определенными типами контента) и HEAD браузер сразу отправляет запрос с заголовком Origin. Сервер должен ответить с заголовком Access-Control-Allow-Origin, содержащим разрешенный домен или *.
  2. Предварительный запрос (Preflight Request): Для "непростых" методов (например, PUT, DELETE) или запросов с кастомными заголовками браузер сначала отправляет запрос OPTIONS. Сервер должен ответить, какие методы, заголовки и домены разрешены.

Пример конфигурации CORS на стороне сервера (Node.js/Express):

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

// Middleware для обработки CORS
app.use((req, res, next) => {
    // Разрешаем запросы с конкретного домена
    res.header('Access-Control-Allow-Origin', 'https://my-frontend-app.com');
    // Разрешаем необходимые методы
    res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
    // Разрешаем необходимые заголовки
    res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
    // Разрешаем отправку кук/учетных данных
    res.header('Access-Control-Allow-Credentials', 'true');

    // Обрабатываем предварительный OPTIONS-запрос
    if (req.method === 'OPTIONS') {
        return res.sendStatus(200);
    }
    next();
});

Ключевые моменты:

  • Заголовок Access-Control-Allow-Origin: * несовместим с Access-Control-Allow-Credentials: true.
  • CORS — это политика браузера, а не сервера. Сервер лишь сообщает браузеру свои правила.
  • Для отладки можно использовать расширения, временно отключающие CORS, но в продакшене конфигурация обязательна.