Чем отличаются простые и сложные (preflight) запросы в контексте CORS?

Что такое CORS и зачем нужны preflight-запросы?

CORS (Cross-Origin Resource Sharing) — это механизм безопасности браузера, который контролирует доступ к ресурсам с другого домена. Когда браузер отправляет запрос на другой источник, он проверяет, разрешен ли такой запрос сервером. Для этого используются заголовки ответа, такие как Access-Control-Allow-Origin.

Простые запросы (simple requests) — это запросы, которые не вызывают побочных эффектов на сервере и могут быть отправлены без предварительной проверки. Они должны соответствовать следующим условиям: метод — GET, HEAD или POST; заголовки — только стандартные (Accept, Accept-Language, Content-Language, Content-Type с значениями application/x-www-form-urlencoded, multipart/form-data или text/plain).

Сложные запросы (preflight requests) — это запросы, которые не соответствуют условиям простых. Перед основным запросом браузер отправляет OPTIONS-запрос с заголовками Access-Control-Request-Method и Access-Control-Request-Headers. Сервер должен ответить соответствующими заголовками, разрешающими запрос.

Примеры кода

Простой запрос:

fetch('https://api.example.com/data', {
  method: 'GET',
  headers: {
    'Content-Type': 'text/plain'
  }
});

Сложный запрос (с нестандартным заголовком):

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-Custom-Header': 'value'
  },
  body: JSON.stringify({ key: 'value' })
});

В этом случае браузер сначала отправит OPTIONS-запрос:

OPTIONS /data HTTP/1.1
Host: api.example.com
Origin: https://myapp.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: content-type, x-custom-header

Сервер должен ответить:

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://myapp.com
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: content-type, x-custom-header

Вывод

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