В чем разница между Origin и Host?

В чем разница между Origin и Host?

Origin и Host — это два разных HTTP заголовка, которые содержат информацию о месте происхождения запроса. Основная разница в том, что Origin включает протокол, а Host — только хост и порт.

Origin — полный адрес с протоколом

Origin (заголовок запроса) содержит схему (protocol), хост и порт. Он используется в основном для проверки CORS (Cross-Origin Resource Sharing).

Origin: [scheme]://[host]:[port]

Примеры:
Origin: https://example.com
Origin: http://localhost:3000
Origin: https://api.prepbro.ru:8443
Origin: https://subdomain.example.com

Origin отправляется браузером при:

// 1. Cross-origin запросы (fetch из другого домена)
fetch('https://api.example.com/data', {
  method: 'POST'
  // Браузер АВТОМАТИЧЕСКИ добавит:
  // Origin: https://currentdomain.com
});

// 2. Запросы с другого протокола (http -> https)
fetch('https://api.example.com/data'); // Origin: http://currentsite.com

// 3. Запросы с другого порта
fetch('https://localhost:8000/api'); // Origin: https://localhost:3000

Host — только хост и порт

Host (заголовок запроса) содержит только хост и порт, без протокола. Он используется сервером для определения какому виртуальному хосту адресован запрос.

Host: [host]:[port]

Примеры:
Host: example.com
Host: localhost:3000
Host: api.prepbro.ru:8443
Host: subdomain.example.com
Host: 192.168.1.1:5000

Host отправляется при любом HTTP запросе:

// Host ВСЕГДА включается в запрос
fetch('http://example.com/api/users');
// Host: example.com

fetch('http://example.com:8080/api/users');
// Host: example.com:8080

fetch('/api/users'); // Same-origin
// Host: текущий хост

Практическое сравнение

Оригин включает protocol, Host включает только хост и порт. Origin используется для CORS проверок, Host для маршрутизации на сервере.

Пример HTTP запроса

Пользователь на https://app.example.com делает запрос к https://api.example.com

HTTP REQUEST:
POST /users HTTP/1.1
Host: api.example.com
Origin: https://app.example.com
Content-Type: application/json

{
  "name": "John"
}

Протокол Origin содержит ВСЕ части адреса (https + app.example.com), а Host только (api.example.com).

CORS и Origin

CORS проверяет Origin, а не Host. Сервер проверяет Origin и решает, разрешить ли запрос:

// Клиент
fetch('https://api.example.com/data', {
  method: 'POST',
  credentials: 'include'
  // Браузер отправляет:
  // Origin: https://app.example.com
});

// Сервер (Node.js + Express)
app.post('/data', (req, res) => {
  const origin = req.get('origin');
  console.log(origin); // https://app.example.com
  
  // Проверяем, разрешен ли этот origin
  if (origin === 'https://app.example.com') {
    res.set('Access-Control-Allow-Origin', origin);
    res.json({ data: 'secret' });
  } else {
    res.status(403).send('CORS violation');
  }
});

Preflight запросы

Для сложных запросов браузер отправляет preflight request с Origin:

Клиент пытается отправить сложный запрос
fetch('https://api.example.com/upload', {
  method: 'POST',
  headers: {
    'X-Custom-Header': 'value'
  },
  body: formData
});

Браузер СНАЧАЛА отправляет preflight:
OPTIONS /upload HTTP/1.1
Host: api.example.com
Origin: https://app.example.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: x-custom-header

Сервер должен ответить:
HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://app.example.com
Access-Control-Allow-Methods: POST
Access-Control-Allow-Headers: x-custom-header

ПОСЛЕ ЭТОГО браузер отправляет реальный запрос

Использование в JavaScript

window.location.origin

// Получить origin текущей страницы
const currentOrigin = window.location.origin;
// Результат: https://app.example.com

const protocol = window.location.protocol; // https:
const host = window.location.host;         // app.example.com:443
const hostname = window.location.hostname;  // app.example.com
const port = window.location.port;         // 443

Сравнение origins для Same-Origin Policy

const sameOrigin = (url) => {
  const urlOrigin = new URL(url).origin;
  const currentOrigin = window.location.origin;
  
  return urlOrigin === currentOrigin;
};

sameOrigin('https://example.com/api'); // false (другой домен)
sameOrigin('https://app.example.com/page'); // false (разный хост)
sameOrigin('https://app.example.com:3000/api'); // false (разный порт)
sameOrigin('https://app.example.com/api'); // true (совпадает всё)

Практический пример React

import { useEffect } from 'react';

function SecureDataFetcher() {
  useEffect(() => {
    const fetchSecureData = async () => {
      try {
        const response = await fetch('https://api.example.com/secure-data', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          credentials: 'include',
          body: JSON.stringify({ query: 'data' })
        });
        
        if (!response.ok) {
          throw new Error(`CORS Error: ${response.status}`);
        }
        
        const data = await response.json();
        console.log('Данные получены:', data);
      } catch (error) {
        console.error('Ошибка запроса:', error);
      }
    };
    
    fetchSecureData();
  }, []);
  
  return <div>Загрузка данных...</div>;
}

Ключевые выводы

• Origin содержит протокол + хост + порт (https://example.com:443)
• Host содержит только хост + порт (example.com:443)
• Origin используется для CORS проверок
• Host используется для маршрутизации на сервере
• Origin отправляется только при cross-origin запросах
• Host отправляется при всех запросах
• Same-Origin Policy учитывает все три части Origin (протокол, хост, порт)
• Для сложных cross-origin запросов браузер отправляет preflight с Origin