PassFront
  1. PassFront
  2. База знаний
  3. DOM и браузер

Сравни способы решения проблемы 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 — это механизм браузера.

Другие вопросы раздела