Что такое кросс-доменный запрос

Question

Что такое кросс-доменный запрос

Тип вопроса: Безопасность Вероятность: 10% Категория: Frontend Разработчик

Ответ

Кросс-доменный запрос (CORS) - это HTTP-запрос, отправляемый с одного домена на другой. Браузеры по умолчанию блокируют такие запросы из соображений безопасности. Для разрешения CORS сервер должен включать специальные заголовки в ответ, например:

Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: Content-Type

Пример запроса с фронтенда:

fetch('https://api.example.com/data', {
  method: 'GET',
  mode: 'cors',
  headers: {
    'Content-Type': 'application/json'
  }
})

Для простых GET-запросов можно использовать JSONP как обходное решение, но это устаревший подход. В современных приложениях лучше настраивать CORS на сервере или использовать прокси.

Ответ 18+ 🔞

А, слушай, про кросс-доменные запросы! Это ж классика, вечная тема для боли и страданий. Представь: твой фронтенд на my-cool-app.com такой весь из себя красивый, пытается по-братски пообщаться с бэкендом на api.super-service.ru. А браузер, этот бдительный пидорас шерстяной, сразу встаёт в позу: «Стой, блядь! Куда полез? Это ж другой домен! Не пущу!».

И ведь не просто так, ёпта, из соображений безопасности. Чтобы какой-нибудь левый скрипт с помойки не стырил твои куки от банка, пока ты на хорошем сайте сидишь.

Чтобы этого не случилось, серверу надо в ответ сунуть специальные заголовки, типа пропуска. Самый главный — Access-Control-Allow-Origin. Это как крикнуть браузеру: «Да, я, блядь, знаю этого чувака с https://example.com, пусть заходит!».

Вот, смотри, как сервер должен ответить, чтобы не быть мудаком:

Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: Content-Type

А с фронта запрос выглядит примерно так, обычный fetch:

fetch('https://api.example.com/data', {
  method: 'GET',
  mode: 'cors',
  headers: {
    'Content-Type': 'application/json'
  }
})

Но если сервер тупит и заголовков не шлёт, народ раньше выкручивался через JSONP. Это такой костыль, ёбаный вротберунчик, когда данные в функцию-колбэк заворачивают. Но это прошлый век, честно. Сейчас на это смотрят как на говно мамонта.

Что делать? Либо сервер настроить, чтобы он эти заголовки слал, как полагается. Либо, если сервер — упрямая жопа и его не трогать, сделать себе прокси. Чтобы твой фронт стучался к своему же проксю, а тот уже, как хитрая жопа, переправляет всё на нужный бэкенд. И волнение ебать — сразу прекращается.