Що таке CORS?

Якщо коротко - це запобіжний механізм браузера, який не дозволяє вам отримати відповідь (а іноді і зробити запит) з іншого домену. Розшифровується CORS як: Cross Origin Resource Sharing

Простий приклад як працює CORS

* Я зробив веб сторінку та виклав її в інтернет, наприклад https://drag13.io
* З цієї сторінки я роблю GET запит на сторінку https://stackoverflow.com
* Запит проходить успішно і сервер повертає браузеру відповідь.
* Браузер бачить, що домени різні і перевіряє відповідь серверу на наявність спеціального заголовку: Access-Control-Allow-Origin. Якщо його немає, або його значення не дорівнює домену клієнта, браузер кидає вам абстрактну помилку Failed to fetch

У більш складних сценаріях, перед виконанням основного запиту, браузер зробить попередній, так званий preflight запит для того щоб дізнатися чи можна взагалі відправляти запит.

Для того щоб зробити запит на інший домен, вам потрібно аби сервер повертав спеціальні HTTP заголовки::

Access-Control-Allow-Origin - для ідентифікації дозволених доменів
Access-Control-Allow-Methods - для ідентифікації дозволених HTTP методів
Access-Control-Allow-Headers - для ідентифікації дозволених заголовків
Access-Control-Max-Age - для того аби знати скільки часу не турбувати сервер повторно.

Для простих запитів - наприклад GET, POST, HEAD без додаткових заголовків достатньо повернути Access-Control-Allow-Origin зі значенням дозволених доменів через кому, або з * (але * використовувати не варто)

Зазвичай це налаштовується один раз на проекті тож завчати на пам'ять це не потрібно. Просто треба пам'ятати, що запити на чужі домени з браузеру можуть бути заблоковані, для їх розблокування вам потрібно або налаштувати заголовки, або робити ці запити з власного серверу.

Бережіть себе, допомагайте ЗСУ
@reactbeginners