Что такое CORS: правило браузера, стоящее за каждой ошибкой cross-origin
Простые запросы, preflight и учётные данные, с тестами на curl.
Читать руководствоСправка CDN.com.tr
Заголовки CORS на edge
Добавляйте Access-Control-Allow-Origin и другие заголовки CORS к ответам правила доставки, оставьте ответы на preflight-запросы OPTIONS вашему origin и разрешите в WAF методы, которые использует ваш API.
Кеш, безопасность, WAF и очистка
Заголовки CORS на edge
Добавляйте Access-Control-Allow-Origin и другие заголовки CORS к ответам правила доставки, оставьте ответы на preflight-запросы OPTIONS вашему origin и разрешите в WAF методы, которые использует ваш API.
Путь в панели
- Панель управления
- Правила доставки
- Правила
- Изменить
- Заголовки
- Добавить заголовки ответа
Предварительные требования
- Правило доставки, которое обслуживает пути, запрашиваемые другим сайтом.
- Точный origin запрашивающего сайта, например
https://app.example.com, или*для файлов, которые может загружать кто угодно. - Для вызовов API, которые отправляют preflight: ваш origin отвечает на
OPTIONSна этих путях кодом 200 или 204. - Роль владельца или редактора: наблюдатели видят правила, но не могут их менять.
Модель принятия решений
Публичные файлы или API?
То, что отправляет браузер, определяет, где выполняется работа.
- Шрифты, изображения и публичный JSON, загружаемые простым
GET: preflight нет, иAccess-Control-Allow-Originв правиле — всё, что им нужно. Пока включена оптимизация изображений для всего аккаунта, файлы.jpg,.jpegи.pngберут заголовки ответа самого старого правила домена, а не правила своего пути. - Вызовы API с JSON-телом, собственными заголовками или
PUT,PATCH,DELETE: браузер сначала отправляет preflight; на него отвечает ваш origin, а правило может добавить к этому ответу заголовки CORS. - Запросы с cookie или другими учётными данными: один конкретный origin, а не
*, плюсAccess-Control-Allow-Credentials true.
Каждый заголовок — от edge или от вашего origin?
Выберите один источник для каждого заголовка.
- Edge (правило): одно фиксированное значение в каждом ответе 2xx и 3xx, включая ответы из кэша, а если строка заканчивается на
always, то и в ответах 4xx и 5xx вашего origin. - Origin: значение, которое зависит от запрашивающего сайта и отправляется с
Vary: Origin. - Отправляется обоими: отметьте его в разделе Удалить заголовки, чтобы уходило только значение правила.
Пошаговое руководство
Добавьте заголовки в правило
Пример для API в /api/, который вызывает одно веб-приложение. Пишите по одному заголовку в строке; значение с пробелами заключается в двойные кавычки.
- Откройте Правила доставки → Правила и нажмите Изменить у правила для
/api/. - В разделе Тогда → Заголовки напишите в поле Добавить заголовки ответа, каждый на отдельной строке:
Access-Control-Allow-Origin https://app.example.com,Access-Control-Allow-Methods "GET, POST, PUT, OPTIONS",Access-Control-Allow-Headers "Content-Type, Authorization"иAccess-Control-Max-Age 600. - В разделе Удалить заголовки отметьте те из этих имён, которые ваш origin тоже отправляет.
- Нажмите Сохранить правило.
Ожидаемый результат: У правила появляется метка вроде +4 загол. ответа, а на странице появляется Опубликовано, как только edge начинает его применять.
Разрешите методы API в WAF
Нужно, пока включён WAF для всего сайта и API использует методы помимо GET, HEAD, POST и OPTIONS.
- На боковой панели откройте WAF Logs в группе Protection.
- В разделе Разрешённые методы HTTP отметьте
PUT,PATCHилиDELETE, как нужно вашему API, оставьтеOPTIONSотмеченным и нажмите Save.
Ожидаемый результат: Панель подтверждает сохранение, а изменение распространяется в течение 1-2 минут.
Проверьте простой запрос и preflight
curl не применяет правила CORS, поэтому показывает ровно то, что отвечает edge.
- Запросите endpoint с заголовком
Origin. - Отправьте preflight, который отправил бы браузер:
OPTIONSсOrigin,Access-Control-Request-MethodиAccess-Control-Request-Headers.
Ожидаемый результат: Простой запрос содержит один access-control-allow-origin. Preflight отвечает 200 или 204 с разрешёнными origin, методами и заголовками.
cdnctl equivalent
curl -s -o /dev/null -D - -H 'Origin: https://app.example.com' https://www.example.com/api/items | grep -iE '^(HTTP|access-control)'
curl -s -o /dev/null -D - -X OPTIONS -H 'Origin: https://app.example.com' -H 'Access-Control-Request-Method: PUT' -H 'Access-Control-Request-Headers: content-type' https://www.example.com/api/items | grep -iE '^(HTTP|access-control|x-mt-blocked-by)'Проверка
- curl -s -o /dev/null -D - -H 'Origin: https://app.example.com' https://www.example.com/api/items | grep -iE '^(HTTP|access-control)' → 2xx и ровно один access-control-allow-origin: https://app.example.com
- curl -s -o /dev/null -D - -X OPTIONS -H 'Origin: https://app.example.com' -H 'Access-Control-Request-Method: PUT' -H 'Access-Control-Request-Headers: content-type' https://www.example.com/api/items | grep -iE '^(HTTP|access-control|x-mt-blocked-by)' → 200 или 204 с access-control-allow-origin, access-control-allow-methods и access-control-allow-headers
- 403 с x-mt-blocked-by: cdn-edge-security на запрос → edge его отклонил (WAF или блокировка по IP, стране, сети или hotlink); проверьте Разрешённые методы HTTP и журналы WAF
Сценарии использования
Веб-приложение на app.example.com загружает шрифты, JSON или ответы API с www.example.com, и браузер блокирует их с ошибкой CORS.
Краткий порядок действий
- Откройте Правила доставки, перейдите на вкладку Правила и нажмите Изменить у правила, которое обслуживает пути, запрашиваемые другим сайтом, или Добавить правило для нового пути.
- В разделе Тогда откройте Заголовки и в поле Добавить заголовки ответа напишите по одному заголовку в строке в виде
Имя-Заголовка значение, без двоеточия, напримерAccess-Control-Allow-Origin https://app.example.com. Значение с пробелами заключается в двойные кавычки. - Если ваш origin уже отправляет заголовок
Access-Control-*для этих путей, отметьте то же имя в разделе Удалить заголовки, чтобы браузер получил одно значение. - Нажмите Сохранить правило (Создать правило для нового правила) и дождитесь, пока на странице появится Опубликовано.
- Если ваш API использует
PUT,PATCHилиDELETEи включён WAF для всего сайта, отметьте эти методы в разделе Разрешённые методы HTTP на странице Security. - Проверьте простой запрос и preflight с помощью curl.
Проверки
- Заголовки правила добавляются к успешным ответам и перенаправлениям (2xx и 3xx), включая ответы из кэша, с момента публикации правила. Строка, которая заканчивается на
always, добавляется и к ответам 4xx и 5xx вашего origin. - Preflight-запросы
OPTIONSуходят на ваш origin и никогда не кэшируются. Когда ваш origin отвечает на preflight кодом 200 или 204, к этому ответу добавляются заголовки правила; preflight, на который пришёл ответ 401, 404 или 405, доходит до браузера без них, если строка не заканчивается наalways. В правиле, где включена Защита паролем или задан Список разрешённых IP, edge сам отвечает 401 или 403 на preflight, который не пропускает. - До браузера доходит ровно один
Access-Control-Allow-Origin: при двух значениях браузер отклоняет ответ. - Если ваш origin меняет
Access-Control-Allow-Originв зависимости от запрашивающего сайта, он должен также отправлятьVary: Origin. Edge хранит эти варианты раздельно, пока в правиле выключен параметр Хранить одну копию в кэше независимо от заголовка Vary. - Оставьте
Access-Control-Request-MethodиAccess-Control-Request-Headersнеотмеченными в разделе Удалить заголовки: отмеченные там имена удаляются и из запросов, отправляемых на ваш origin, а ваш origin читает эти два заголовка, чтобы ответить на preflight. - При включённом WAF для всего сайта
GET,HEAD,POSTиOPTIONSразрешены по умолчанию. Запрос с методом, которого нет в списке, получает 403 без заголовков CORS и сX-MT-Blocked-By: cdn-edge-security, а браузер сообщает об этом как об ошибке CORS. - Пока включена оптимизация изображений для всего аккаунта, файлы
.jpg,.jpegи.pngполучают заголовки ответа самого старого правила домена, а не правила своего пути: добавьте заголовок CORS для этих изображений в то правило, с фиксированнымAccess-Control-Allow-Origin. Если это самое старое правило — правило проверки сертификатов, они не получают заголовков ни от одного правила.
Часто задаваемые вопросы
Отвечает ли edge на preflight-запросы сам?
Edge передаёт запросы OPTIONS на ваш origin и никогда их не кэширует, поэтому ваш origin должен отвечать на preflight кодом 200 или 204. К этому ответу добавляются заголовки ответа правила: заголовки CORS могут приходить из правила, а вашему origin достаточно принимать OPTIONS. Исключение: в правиле, где включена Защита паролем или задан Список разрешённых IP, edge сам отвечает 401 или 403 на preflight, который не пропускает.
Может ли одно правило разрешить несколько сайтов?
Правило добавляет одно и то же значение ко всем ответам: * или один origin, например https://app.example.com. Чтобы разрешить несколько origin, пусть ваше приложение отправляет подходящий origin вместе с Vary: Origin, а Access-Control-Allow-Origin в правило не добавляйте. Запросам с cookie или другими учётными данными нужен конкретный origin, а не *.
Браузер всё ещё сообщает об ошибке CORS. Что проверить?
Начните со статуса неудачного запроса на панели «Сеть» в браузере. 403 с X-MT-Blocked-By: cdn-edge-security приходит от edge: найдите его в журналах WAF и, если его метода нет в списке, добавьте метод в разделе Разрешённые методы HTTP. По умолчанию любой другой 4xx или 5xx приходит без заголовков правила, поэтому сначала исправьте этот ответ. Строка, которая заканчивается на always, например Access-Control-Allow-Origin https://app.example.com always, добавляется и к ответам 4xx и 5xx вашего origin. Затем проверьте, что приходит ровно один Access-Control-Allow-Origin и что он совпадает с запрашивающим сайтом, включая схему.
Мой API использует PUT, PATCH или DELETE. Что изменить?
Пока включён WAF для всего сайта, откройте страницу Security, отметьте методы в разделе Разрешённые методы HTTP и нажмите Save; изменение распространяется в течение 1-2 минут. Разрешённые методы запросов на вкладке Безопасность в правилах доставки открывает ту же карточку. Оставьте OPTIONS отмеченным: браузеры отправляют его для preflight-запросов.