Тестер CORS
Тестуйте та діагностуйте заголовки Cross-Origin Resource Sharing (CORS) для будь-якої URL
Приклади URL для тестування
Розуміння CORS
Що таке CORS?
Cross-Origin Resource Sharing (CORS) — це механізм безпеки, який дозволяє веб-сторінці з одного джерела запитувати ресурси з іншого джерела. Без CORS браузери за замовчуванням блокують такі крос-доменні запити, щоб запобігти вразливостям безпеки.
Як працює CORS
Коли браузер виконує крос-доменний запит, він надсилає заголовок Origin. Сервер має відповісти відповідним заголовком Access-Control-Allow-Origin. Для непростих запитів браузер спочатку надсилає preflight-запит OPTIONS, щоб перевірити, чи дозволено фактичний запит.
Ключові заголовки CORS
Access-Control-Allow-Origin вказує дозволені джерела. Access-Control-Allow-Methods перелічує дозволені HTTP-методи. Access-Control-Allow-Headers визначає дозволені заголовки запиту. Access-Control-Allow-Credentials вказує, чи дозволено cookie.
Налагодження помилок CORS
Помилки CORS з'являються у консолі браузера, коли крос-доменний запит блокується. Перевірте, що сервер містить правильні заголовки CORS. Для API переконайтеся, що сервер дозволяє ваше джерело, необхідні методи та будь-які користувацькі заголовки, які ви надсилаєте.
Тестер CORS
Тестуйте та діагностуйте заголовки Cross-Origin Resource Sharing (CORS) для будь-якої URL
Можливості
- Send real HTTP requests to a target URL and inspect CORS-related headers in the response
- Reports Access-Control-Allow-Origin, Allow-Methods, Allow-Headers, Allow-Credentials, Max-Age
- Tests preflight (OPTIONS) and actual-request behaviour
- Runs in your browser — your request is sent FROM your origin, so the result reflects what your real app would see
- Useful for debugging CORS-blocked production fetches
Як використовувати
- Введіть URL, яку хочете протестувати, у поле введення або оберіть один із наданих прикладів URL для швидкого тестування.
- Оберіть HTTP-метод (GET, POST тощо) і за бажанням додайте користувацькі заголовки в розділі розширених параметрів.
- Натисніть «Тестувати CORS», щоб надіслати крос-доменний запит і переглянути детальні результати, включно з усіма заголовками CORS та їхніми значеннями.
Поради та найкращі практики
- Each test sends a real HTTPS request to the target URL — the URL and your IP are visible to the target server.
- CORS is enforced by the browser, not the server. The server sends headers; the browser decides whether to expose the response to JS.
- For wildcard ACAO (`Access-Control-Allow-Origin: *`), the request will succeed but credentials (cookies) won't be sent — that's the spec.
- Preflight (OPTIONS) is sent only for non-simple requests (custom headers, non-GET/POST methods, JSON body in some cases).
- If the test fails, check the browser devtools Network tab — the actual error message is more detailed than this tool can surface.
Запитання та відповіді
Що таке CORS і чому це важливо для веб-розробників?
CORS (Cross-Origin Resource Sharing) — це функція безпеки браузера, яка контролює, які веб-сторінки можуть надсилати запити до домену, відмінного від того, що обслуговував сторінку. Це важливо, оскільки сучасні веб-додатки часто повинні викликати API на різних доменах, і без належної конфігурації CORS такі запити будуть заблоковані браузером. Розуміння CORS є необхідним для створення додатків, які взаємодіють зі сторонніми API або мікросервісами.
Чому я отримую помилку CORS, хоча API працює у Postman або curl?
CORS — це політика безпеки, що застосовується браузером, а не серверне обмеження. Такі інструменти, як Postman і curl, повністю обходять CORS, оскільки вони не є браузерами та не застосовують політику одного джерела. Браузер спеціально перевіряє заголовки CORS у відповіді сервера і блокує запит, якщо вони відсутні або некоректні. Саме тому API може чудово працювати у Postman, але не працювати у браузерному додатку.
Що таке preflight-запит і коли браузер його надсилає?
Preflight-запит — це OPTIONS-запит, який браузер автоматично надсилає перед фактичним запитом, щоб перевірити, чи дозволяє сервер крос-доменний запит. Браузер надсилає preflight для запитів, що використовують методи, відмінні від GET, HEAD або POST, або містять користувацькі заголовки, або використовують значення Content-Type, відмінні від application/x-www-form-urlencoded, multipart/form-data чи text/plain. Сервер має відповісти з відповідними заголовками CORS, щоб дозволити продовження фактичного запиту.
Що означає Access-Control-Allow-Origin: * і чи це безпечно?
Значення з підстановкою * означає, що сервер дозволяє запити з будь-якого джерела. Хоча це зручно для публічних API, це може становити загрозу безпеки для приватних API, що обробляють конфіденційні дані. При використанні * сервер не може також встановити Access-Control-Allow-Credentials у значення true. Для API, які вимагають автентифікації, слід вказувати точні дозволені джерела замість використання підстановочного символу.
Як виправити помилки CORS на моєму сервері?
Щоб виправити помилки CORS, вам потрібно налаштувати сервер так, щоб він включав відповідні заголовки CORS у свої відповіді. Як мінімум, додайте Access-Control-Allow-Origin зі значенням підстановочного символу (*) або конкретного джерела, що надсилає запит. Для непростих запитів також додайте Access-Control-Allow-Methods і Access-Control-Allow-Headers. Більшість веб-фреймворків мають пакети проміжного ПЗ CORS, які спрощують цю конфігурацію, наприклад cors для Express.js, django-cors-headers для Django або rack-cors для Ruby on Rails.
Чи дійсно цей інструмент виконує реальні крос-доменні запити?
Так, цей інструмент виконує реальні fetch-запити з вашого браузера до вказаної URL, що означає повне застосування політики CORS браузера. Якщо цільовий сервер не містить заголовків CORS, браузер заблокує відповідь і інструмент покаже статус «CORS заблоковано». Це дає точне уявлення про те, як поведеться ваш браузерний додаток під час виконання того самого запиту.