Что такое CORS?

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

CORS — это механизм безопасности, реализованный в современных браузерах, который позволяет веб-приложениям, работающим на одном домене (origin), делать HTTP-запросы к ресурсам, расположенным на другом домене, с определенными ограничениями. Без CORS такие запросы были бы запрещены политикой Same-Origin Policy (SOP) — фундаментальным правилом безопасности браузеров.

Проблема, которую решает CORS

Браузер по умолчанию блокирует междоменные (cross-origin) запросы, инициированные скриптами (например, через fetch или XMLHttpRequest), из-за соображений безопасности. Это предотвращает атаки, когда злонамеренный скрипт с одного сайта пытается получить доступ к данным пользователя на другом сайте (например, в банковском приложении).

Пример происхождения (origin):

• Протокол (http:// или https://)
• Домен (example.com)
• Порт (:8080)

Если любой из этих компонентов различается — это разные источники.

Как работает CORS

CORS работает через добавление специальных HTTP-заголовков в запросы и ответы:

1. Простые запросы (Simple Requests):

• Используют методы: GET, POST, HEAD
• Имеют ограниченный набор заголовков
• Не содержат пользовательские заголовки

# Запрос от клиента с origin: https://frontend.com
GET https://api.backend.com/data HTTP/1.1
Origin: https://frontend.com

# Ответ от сервера
HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://frontend.com
Content-Type: application/json

{"data": "some value"}

2. Предварительные запросы (Preflight Requests):

• Для "непростых" запросов (с пользовательскими заголовками, методами PUT, DELETE и т.д.)
• Браузер сначала отправляет запрос OPTIONS для проверки разрешений

# Preflight запрос
OPTIONS https://api.backend.com/data HTTP/1.1
Origin: https://frontend.com
Access-Control-Request-Method: DELETE
Access-Control-Request-Headers: X-Custom-Header

# Ответ сервера
HTTP/1.1 204 No Content
Access-Control-Allow-Origin: https://frontend.com
Access-Control-Allow-Methods: GET, POST, DELETE
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Max-Age: 86400

Основные CORS-заголовки

Серверные заголовки:

• Access-Control-Allow-Origin — разрешенные домены (* для всех)
• Access-Control-Allow-Methods — разрешенные HTTP-методы
• Access-Control-Allow-Headers — разрешенные заголовки запроса
• Access-Control-Allow-Credentials — разрешение отправки кук/авторизации
• Access-Control-Max-Age — кэширование preflight ответа

Клиентские заголовки:

• Origin — автоматически добавляется браузером
• Access-Control-Request-Method — для preflight запросов
• Access-Control-Request-Headers — для preflight запросов

Реализация в ASP.NET Core

// В Program.cs или Startup.cs
app.UseCors(options =>
{
    options.WithOrigins("https://frontend.com", "http://localhost:3000")
           .AllowAnyMethod()
           .AllowAnyHeader()
           .AllowCredentials()
           .WithExposedHeaders("X-Custom-Header"); // Дополнительные заголовки для клиента
});

// Или с политиками
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowSpecificOrigin",
        policy =>
        {
            policy.WithOrigins("https://frontend.com")
                  .AllowAnyMethod()
                  .AllowAnyHeader();
        });
});

app.UseCors("AllowSpecificOrigin");

Важные аспекты для Backend-разработчика

Безопасность:

• Избегайте Access-Control-Allow-Origin: * при работе с учетными данными
• Тщательно валидируйте разрешенные домены в продакшене
• Учитывайте, что CORS — это защита браузера, а не сервера

Производительность:

• Используйте Access-Control-Max-Age для кэширования preflight запросов
• Минимизируйте список разрешенных методов и заголовков

Особые случаи:

• Для запросов с учетными данными (credentials: 'include') нельзя использовать * в Allow-Origin
• При использовании WebSocket CORS не применяется

Отладка проблем с CORS

Распространенные ошибки и их причины:

1. "No 'Access-Control-Allow-Origin' header" — сервер не возвращает нужный заголовок
2. Credentials not supported with wildcard origin — конфликт Allow-Credentials: true и Allow-Origin: *
3. Preflight response didn't succeed — неудачный OPTIONS запрос

Проверка в браузере:

// Пример запроса, который может вызвать CORS ошибку
fetch('https://api.example.com/data', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'X-Custom-Header': 'value'
    },
    body: JSON.stringify({ data: 'test' }),
    credentials: 'include' // Отправка кук
});

Заключение

CORS — критически важный механизм безопасности для современных распределенных веб-приложений. Как backend-разработчик, вы должны правильно настраивать CORS политики, балансируя между безопасностью и функциональностью. Понимание различий между простыми и предварительными запросами, правильная обработка учетных данных и тщательная настройка разрешенных источников — ключевые навыки для создания надежных и безопасных API.