Как обойти невозможность пойти с домена на сервер?

Проблема CORS (Cross-Origin Resource Sharing)

Вопрос касается классической проблемы в веб-разработке — CORS (Cross-Origin Resource Sharing). Браузер блокирует запросы со скрипта на сервер другого домена по соображениям безопасности. Это защита от CSRF-атак и утечек данных.

Решение 1: Бэкенд CORS-заголовки

Самый правильный способ — настроить CORS на бэкенде. Сервер должен вернуть заголовки, разрешающие запрос:

// На бэкенде (Node.js/Express пример):
app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "https://yourfrontend.com");
  res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
  res.header("Access-Control-Allow-Headers", "Content-Type, Authorization");
  res.header("Access-Control-Allow-Credentials", "true");
  
  if (req.method === "OPTIONS") {
    return res.sendStatus(200);
  }
  next();
});

// На фронтенде:
fetch("https://api.example.com/data", {
  method: "GET",
  credentials: "include", // для отправки cookies
  headers: {
    "Content-Type": "application/json"
  }
})
.then(res => res.json())
.catch(err => console.error(err));

Решение 2: Прокси на бэкенде (Backend Proxy)

Если нельзя изменить заголовки удалённого сервера — создай прокси-эндпоинт на своём бэкенде:

// На фронтенде запрашиваем свой сервер:
fetch("/api/proxy/data", {
  method: "GET"
})
.then(res => res.json());

// На своём бэкенде (Node.js):
app.get("/api/proxy/data", async (req, res) => {
  try {
    const response = await fetch("https://external-api.com/data");
    const data = await response.json();
    res.json(data); // Данные идут через наш домен, CORS не блокирует
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

Решение 3: JSONP (старый способ, не рекомендуется)

Для очень старых браузеров (IE8-9) иногда используют JSONP, но это уязвимо и устарело:

// Не рекомендуется в современной разработке!
function jsonpRequest(url, callback) {
  const script = document.createElement("script");
  script.src = url + "?callback=" + callback;
  document.body.appendChild(script);
}

Решение 4: Server-Sent Events (SSE) без CORS

Если нужна передача данных в одну сторону, SSE обходит CORS проще:

// На бэкенде:
app.get("/api/stream", (req, res) => {
  res.setHeader("Content-Type", "text/event-stream");
  res.setHeader("Access-Control-Allow-Origin", "*");
  
  res.write("data: {\"message\": \"Hello\"}\n\n");
});

// На фронтенде:
const eventSource = new EventSource("/api/stream");
eventSource.onmessage = (event) => {
  console.log(JSON.parse(event.data));
};

Решение 5: WebSocket (двусторонний канал)

WebSocket не подвержен CORS ограничениям:

// На фронтенде:
const ws = new WebSocket("wss://api.example.com/socket");

ws.onopen = () => {
  ws.send(JSON.stringify({ action: "getData" }));
};

ws.onmessage = (event) => {
  console.log("Получены данные:", JSON.parse(event.data));
};

Какой способ выбрать?

В современной разработке (2024+): используй CORS или прокси. Это стандартные, безопасные и понятные подходы.