## Что такое CORS ошибка и почему она возникает
CORS (Cross-Origin Resource Sharing) — механизм безопасности браузеров, блокирующий запросы между разными доменами. Ошибка возникает, когда фронтенд на domain.ru пытается получить данные с api.service.com без разрешения. Браузер блокирует ответ, вызывая ошибку в консоли: “Access to XMLHttpRequest has been blocked by CORS policy”. Это защищает пользователей от межсайтовых атак, но осложняет разработку.
## Как прокси-сервер решает проблему CORS
Прокси-сервер выступает посредником между клиентом и целевым API. Вместо прямого запроса к api.service.com, фронтенд отправляет запрос на ваш прокси (proxy.yoursite.ru), который:
* Пересылает запрос к целевому API
* Получает ответ
* Добавляет заголовки `Access-Control-Allow-Origin: *`
* Возвращает данные клиенту
Так браузер видит запрос в пределах одного домена, обходя CORS ограничения.
## Топ-3 типа прокси для решения CORS
1. **Локальный dev-прокси** (для разработки):
– Настройка в Webpack/Vite
– Пакеты: `http-proxy-middleware` для Node.js
– Автоматическая переадресация запросов
2. **Облачные сервисы** (готовые решения):
– CORS Anywhere (cors-anywhere.herokuapp.com)
– All Origins (allorigins.win)
– RapidAPI CORS Proxy
3. **Самодельный прокси-сервер** (полный контроль):
– Node.js + Express
– Nginx reverse proxy
– Cloudflare Workers
## Пошаговая настройка прокси на Node.js
**Шаг 1: Установите зависимости**
“`bash
npm install express http-proxy-middleware cors
“`
**Шаг 2: Создайте server.js**
“`javascript
const express = require(‘express’);
const { createProxyMiddleware } = require(‘http-proxy-middleware’);
const cors = require(‘cors’);
const app = express();
app.use(cors());
app.use(‘/api’, createProxyMiddleware({
target: ‘https://api.target-service.com’,
changeOrigin: true,
pathRewrite: { ‘^/api’: ” },
}));
app.listen(3000, () => console.log(‘Прокси работает на порту 3000’));
“`
**Шаг 3: Настройте фронтенд**
Замените базовый URL запросов на:
“`javascript
fetch(‘http://localhost:3000/api/data’)
“`
**Шаг 4: Запустите сервер**
“`bash
node server.js
“`
## Альтернативные методы обхода CORS
– **Настройка сервера API**: Добавьте заголовки `Access-Control-Allow-Origin` на источнике.
– **JSONP**: Для GET-запросов (устаревший метод).
– **Chrome-расширения**: Moesif CORS или CORS Unblock (только для тестирования).
## Частые вопросы (FAQ)
**Q: Безопасно ли использовать публичные прокси?**
A: Нет. Они могут логировать ваши данные. Для продакшена создавайте собственный прокси.
**Q: Как избежать CORS в мобильных приложениях?**
A: Используйте встроенные WebView настройки или прокси-сервер.
**Q: Работает ли прокси для POST/PUT запросов?**
A: Да, прокси корректно передаёт все HTTP-методы и заголовки.
**Q: Можно ли кэшировать ответы через прокси?**
A: Да, добавьте в конфигурацию Nginx или Express middleware для кэширования.
**Q: Почему CORS блокирует запросы даже с прокси?**
A: Проверьте:
1. Корректность URL прокси
2. Наличие заголовка `Access-Control-Allow-Origin` в ответе прокси
3. Отсутствие ошибок 404/500
## Заключение
Прокси-сервер — эффективное решение CORS ошибок в разработке и продакшене. Для критичных данных разворачивайте приватный прокси на Node.js, Nginx или Cloudflare Workers. Публичные сервисы подходят только для тестирования. Помните: правильная настройка CORS на целевом API предпочтительнее обходных манёвров.
