Как пользоваться
- Выберите сервер и режим: только перечисленные источники или любой источник.
- Введите источники в точности так, как их отправляет браузер: схема, хост и порт, без пути. Слеш в конце убирается.
- Настройте методы, заголовки запроса, открытые заголовки, credentials и время кэша preflight и скопируйте конфигурацию.
Как работает CORS
К межсайтовым запросам браузер добавляет заголовок Origin. В ответе должен быть Access-Control-Allow-Origin с этим источником (или *), иначе JavaScript не сможет его прочитать. Перед сложными запросами идёт preflight-запрос OPTIONS, на который нужно ответить списком разрешённых методов и заголовков.
| Заголовок | Значение |
|---|---|
| Access-Control-Allow-Origin | единственный источник, которому можно читать ответ, или * |
| Access-Control-Allow-Methods | методы, разрешённые в основном запросе |
| Access-Control-Allow-Headers | заголовки, которые может отправить клиент |
| Access-Control-Expose-Headers | заголовки ответа, доступные JavaScript |
| Access-Control-Allow-Credentials | true — разрешить cookie и HTTP-авторизацию |
| Access-Control-Max-Age | сколько секунд можно кэшировать ответ на preflight |
Пример
Источники https://example.com и https://app.example.com для nginx. Их два, поэтому генератор пишет map, который копирует Origin запроса в $cors_origin, только если он есть в списке:
map $http_origin $cors_origin {
default "";
"https://example.com" $http_origin;
"https://app.example.com" $http_origin;
}Внутри location / отправляются Access-Control-Allow-Origin $cors_origin, Vary: Origin, методы, заголовки и Access-Control-Max-Age 86400, а на OPTIONS выполняется return 204.
Частые ошибки
- Путь или слеш в источнике. Браузер отправляет https://example.com, а не https://example.com/ и не https://example.com/api.
- Нет Vary: Origin, хотя разрешённый источник меняется от запроса к запросу: CDN может отдать ответ одного сайта другому.
- Заголовки CORS в двух местах (в приложении и в прокси). Два заголовка Access-Control-Allow-Origin браузер отвергает.