Сравни способы решения проблемы CORS и объясни, когда выбирать каждый вариант.
DOM и браузер
Проблему CORS решают на стороне сервера (правильные заголовки), через прокси, или, для разработки, через dev-прокси. Клиент сам обойти CORS не может — это защита браузера.
Способы
1. Настроить CORS-заголовки на сервере (правильный способ)
Access-Control-Allow-Origin: https://app.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Allow-Credentials: trueПодходит, когда вы контролируете backend.
2. Прокси-сервер
Запросы идут на свой backend, который обращается к внешнему API. Для браузера это same-origin, CORS не применяется (проверка только браузером).
3. Dev-прокси (только разработка)
Vite/webpack-dev-server проксируют /api на бэкенд:
// vite.config.js
server: { proxy: { '/api': 'http://localhost:4000' } }4. Same-origin размещение
Разместить фронт и API на одном origin — CORS не возникает.
Чего делать НЕ стоит
- Публичные «CORS-anywhere» прокси — небезопасно для продакшена.
- Отключать веб-безопасность в браузере.
Как выбирать
- Свой backend → настроить заголовки.
- Чужой API → свой прокси.
- Локальная разработка → dev-прокси.
Коротко для собеседования
CORS решают на сервере (заголовки Access-Control-Allow-*), через собственный прокси для чужого API или dev-прокси в разработке. Клиент не может обойти CORS — это механизм браузера.