🔒Открыть пост
и посмотреть медиа
и посмотреть медиа
CORS В API: ПОЧЕМУ БРАУЗЕР БЛОКИРУЕТ ЗАПРОСЫ И КАК ЭТО ПРОВЕРИТЬ?
Сегодня хочу вам рассказать про CORS технологию, ошибки в которой часто ставят в тупик тестировщиков. Особенно когда в Postman всё работает, а в браузере — ошибка.
Простыми словами CORS - это защита браузера, которая блокирует запросы между разными доменами, портами или протоколами для защиты пользователей от потенциально опасных скриптов. Например, сайт mysite.com не может просто так обратиться к API на api.company.com. Чаще всего в браузере вы можете получить такую ошибку "Access to fetch at... has been blocked by CORS policy"
Когда срабатывает CORS:
- Разные домены: site1.com → site2.com
- Разные порты: localhost:3000 → localhost:8080
- Разные протоколы: http:// → https://
- Разные поддомены: api.site.com → site.com
Почему в Postman работает, а в браузере нет? Postman и curl не являются браузерами, поэтому CORS их не касается. А вот JavaScript в браузере — да.
Основные заголовки, которые нужно проверять:
Access-Control-Allow-Origin, кому разрешено делать запросы:
- * (звездочка) означает, что разрешены запросы с любых доменов
- Ссылка скрыта — только конкретному домену
- отсутствие заголовка блокирует все cross-origin запросы
Access-Control-Allow-Methods, определяет, какие методы разрешены для использования:
- GET, POST, PUT, DELETE и т д
Access-Control-Allow-Headers, определяет, какие заголовки можно передавать:
- Content-Type, Authorization и т д
Что обязательно тестировать:
- Работают ли запросы с фронтенда на нужный домен
- Приходят ли правильные CORS заголовки в ответе
- Работает ли preflight запрос (OPTIONS) для сложных запросов
- Передаются ли cookies, если нужно
Как тестировать:
Самый простой способ — открыть DevTools в браузере, и сделать нужны запрос в приложении. Если увидите ошибку про CORS — значит что-то не настроено на сервере и это ошибка.
Чтобы упростить себе работу, можно включить в браузере опцию "Preserve log" в DevTools, чтобы видеть все запросы, включая preflight.
А вы сталкивались с проблемами CORS? 👇
Все мои проекты:
TG канал по тестированию AI |
Youtube channel | Практика по тестированию | Платформа TestGrow | Автоматизация тестирования | Курс по тест-менеджменту | База знаний