Как настроить CORS правильно
CORS (Cross-Origin Resource Sharing) — механизм, разрешающий JavaScript с одного origin (domain:port:scheme) запрашивать ресурсы с другого. Без CORS browsers блокируют fetch/XHR. Настройка: HTTP-заголовки Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers. Для credentials и non-simple requests — preflight (OPTIONS).
Ниже: пошаговая инструкция, рабочие примеры, типичные ошибки, FAQ.
Пошаговая настройка
- Определите allowed origins. Wildcard
*— только для public API без credentials - Для specific origins: echo Origin header если in whitelist
- Для preflight (OPTIONS): ответить
Access-Control-Allow-Methods: GET, POST, PUT - Если нужны cookies:
Access-Control-Allow-Credentials: true+ НЕ wildcard - Cache preflight:
Access-Control-Max-Age: 86400(24h) - Проверьте: Enterno CORS-чекер с test Origin
- В DevTools → Network → ищите preflight OPTIONS + headers
Рабочие примеры
| Сценарий | Конфиг |
|---|---|
| nginx simple CORS | add_header 'Access-Control-Allow-Origin' 'https://app.example.com' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type' always; |
| nginx preflight | if ($request_method = OPTIONS) {
add_header 'Access-Control-Allow-Origin' '$http_origin';
add_header 'Access-Control-Max-Age' 86400;
return 204;
} |
| Apache .htaccess | Header set Access-Control-Allow-Origin "https://app.example.com"
Header set Access-Control-Allow-Credentials "true" |
| Express.js | app.use(cors({ origin: 'https://app.example.com', credentials: true })); |
| Whitelist multiple origins | map $http_origin $cors_origin {
default "";
"~^https?://(app|api)\.example\.com$" $http_origin;
}
add_header 'Access-Control-Allow-Origin' $cors_origin always; |
Типичные ошибки
- Wildcard
*+ Credentials=true — browsers блокируют, silent fail - Не отвечать на preflight OPTIONS — Chrome delegates заголовки на actual request который никогда не произойдёт
- Access-Control-Allow-Headers не включает custom header типа X-Request-Id — fail
- Echo Origin без whitelist — CSRF vulnerability для credentialed endpoints
- Разница между simple request (GET без headers) и non-simple — первый не делает preflight
Больше по теме
Часто задаваемые вопросы
Что такое simple request?
Simple request: GET/HEAD/POST + only standard headers (Accept, Content-Type in form/text). Без preflight OPTIONS, идёт сразу. Не simple = preflight обязателен.
Почему не работает wildcard * с credentials?
Security spec: credentials (cookies) + wildcard = теоретически любой site может украсть sessions. Browsers блокируют комбинацию.
Как отладить CORS ошибку?
DevTools → Network → красный запрос → Headers. Console покажет "CORS policy: ..." с причиной. <a href="/cors">Enterno CORS checker</a> симулирует разные Origin headers.
Проверить CORS online?
<a href="/cors">Enterno CORS checker</a> — введите URL + Origin → увидите what headers returned.