У цій статті
Що таке CORS?
Cross-Origin Resource Sharing (CORS) — це механізм безпеки браузера, який контролює, які веб-джерела можуть отримувати доступ до ресурсів на вашому сервері. За замовчуванням браузери застосовують політику одного джерела, блокуючи JavaScript-запити до іншого домену, порту або протоколу.
Заголовки CORS повідомляють браузеру, які міждоменні запити дозволити. Без правильних заголовків API-виклики з фронтенду на одному домені до бекенду на іншому зазнають невдачі з помилкою CORS. Генератор заголовків CORS створює правильні заголовки Access-Control-Allow-*.
Як працюють заголовки CORS
CORS працює через набір HTTP-заголовків відповіді, які сервер надсилає, щоб вказати, які джерела, методи та заголовки дозволені для міждоменних запитів.
- Access-Control-Allow-Origin — вказує, які джерела можуть отримати доступ до ресурсу (конкретний домен або * для будь-якого)
- Передпольотні запити — для нестандартних запитів браузери спочатку надсилають OPTIONS-запит, щоб перевірити, чи дозволений фактичний запит
- Обробка облікових даних — Access-Control-Allow-Credentials: true дозволяє cookies та заголовки авторизації, але вимагає конкретного джерела
Спробуйте безкоштовно — реєстрація не потрібна
Згенерувати заголовки CORS →Коли налаштовувати CORS
Налаштування CORS необхідне, коли ваш фронтенд і бекенд обслуговуються з різних джерел.
- Розробка API — REST або GraphQL API, до яких звертаються фронтенд-додатки на інших доменах, потребують заголовків CORS
- Налаштування CDN — обслуговування статичних ресурсів з піддомену CDN вимагає CORS для файлів шрифтів та API-запитів
- Мікросервіси — сервіси на різних портах під час локальної розробки потребують CORS для комунікації через браузер
Часті запитання
Чому не можна просто використовувати Access-Control-Allow-Origin: * для всього?
Символ * дозволяє будь-яке джерело, що підходить для публічних API. Однак він не може використовуватися з обліковими даними (cookies, заголовки Authorization). Якщо ваш API вимагає автентифікації, потрібно вказати точне джерело.
Що таке передпольотний запит?
Передпольотний запит — це HTTP OPTIONS-запит, який браузер автоматично надсилає перед фактичним запитом. Він перевіряє, чи дозволяє сервер метод, заголовки та джерело.
Як виправити помилку 'No Access-Control-Allow-Origin header'?
Додайте заголовок Access-Control-Allow-Origin до відповіді вашого сервера з доменом джерела запиту. Для Express використовуйте middleware cors, для Nginx додайте директиви add_header.