Что нужно браузеру для отправки запроса на сервер?

Что нужно браузеру для отправки запроса на сервер

Это базовый, но важный вопрос. Браузер нуждается в нескольких компонентах для успешной отправки HTTP запроса.

Обязательные компоненты:

1. URL (Uniform Resource Locator)

Браузер должен знать, куда отправить запрос.

// Полный URL
const url = 'https://api.example.com/users/123';

// Структура URL:
// https:// - протокол (схема)
// api.example.com - хост (domain)
// /users/123 - путь (path)

// Остальное опционально:
// https://api.example.com:8080/users?page=1&limit=10#comments
// ^                        ^^^^  ^                       ^
// протокол                 порт  query параметры       якорь

2. HTTP метод (Method)

Браузер должен знать, какой тип операции:

// GET - получить данные
fetch('https://api.example.com/users');
// По умолчанию GET

// POST - создать данные
fetch('https://api.example.com/users', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'John' })
});

// PUT - обновить данные полностью
fetch('https://api.example.com/users/1', {
  method: 'PUT',
  body: JSON.stringify({ name: 'John Updated' })
});

// PATCH - обновить частично
fetch('https://api.example.com/users/1', {
  method: 'PATCH',
  body: JSON.stringify({ name: 'John' })
});

// DELETE - удалить
fetch('https://api.example.com/users/1', {
  method: 'DELETE'
});

Опциональные, но часто нужные:

3. Заголовки (Headers)

Метаинформация о запросе.

fetch('https://api.example.com/users', {
  headers: {
    // Тип содержимого
    'Content-Type': 'application/json',
    
    // Авторизация
    'Authorization': 'Bearer token123',
    
    // Пользовательский заголовок
    'X-Request-ID': 'uuid-123',
    
    // Accept - какой формат ответа
    'Accept': 'application/json'
  }
});

Важные заголовки:

{
  'Content-Type': 'application/json', // Я отправляю JSON
  'Authorization': 'Bearer token',      // Токен авторизации
  'User-Agent': '...',                  // Браузер автоматически добавляет
  'Accept': 'application/json',         // Принимаю JSON
  'Referer': '...',                     // Откуда пришли (браузер добавляет)
  'Origin': '...'                       // Origin (браузер добавляет)
}

4. Тело запроса (Body)

Данные, которые отправляем серверу.

// GET не имеет body
fetch('https://api.example.com/users');

// POST имеет body
fetch('https://api.example.com/users', {
  method: 'POST',
  body: JSON.stringify({ name: 'John', email: 'john@example.com' })
});

// Различные форматы body:
// JSON
body: JSON.stringify({ name: 'John' })

// FormData (для загрузки файлов)
const formData = new FormData();
formData.append('name', 'John');
formData.append('file', fileInput.files[0]);
body: formData

// URLEncoded
body: 'name=John&email=john@example.com'
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }

// Plain text
body: 'Some text'
headers: { 'Content-Type': 'text/plain' }

Браузер автоматически добавляет:

Браузер сам знает эти данные:

// Браузер добавляет автоматически:
{
  'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) ...', // ОС и браузер
  'Accept-Language': 'en-US,en;q=0.9',                            // Язык браузера
  'Accept-Encoding': 'gzip, deflate, br',                         // Способ сжатия
  'Connection': 'keep-alive',                                      // Переиспользовать соединение
  'Referer': 'https://example.com/page',                           // Откуда пришли
  'Origin': 'https://example.com'                                  // Origin сайта
}

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

Простой GET запрос

// Всё что нужно браузеру:
fetch('https://api.example.com/users')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

// Браузер делает:
// 1. Парсит URL
// 2. Открывает TCP соединение на порт 443 (HTTPS)
// 3. Отправляет HTTP запрос:
/*
GET /users HTTP/1.1
Host: api.example.com
User-Agent: Mozilla/5.0...
Accept: application/json
Accept-Language: en-US
...
*/
// 4. Ждет ответ от сервера
// 5. Парсит ответ

Более сложный POST запрос

const newUser = { name: 'John', email: 'john@example.com' };

fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer mytoken123'
  },
  body: JSON.stringify(newUser)
})
  .then(response => response.json())
  .then(data => console.log('User created:', data))
  .catch(error => console.error('Error:', error));

// Браузер отправляет:
/*
POST /users HTTP/1.1
Host: api.example.com
Content-Type: application/json
Authorization: Bearer mytoken123
Content-Length: 45
User-Agent: Mozilla/5.0...

{"name":"John","email":"john@example.com"}
*/

CORS (Cross-Origin Resource Sharing):

Браузер проверяет CORS перед отправкой

// Если запрос с другого origin, браузер проверяет:
fetch('https://other-domain.com/data');
// Origin: https://example.com

// Сервер должен ответить:
// Access-Control-Allow-Origin: https://example.com
// иначе браузер заблокирует ответ

Preflight запрос (для сложных запросов)

// Браузер сначала отправляет OPTIONS запрос
fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'X-Custom-Header': 'value' // Нестандартный заголовок
  },
  body: JSON.stringify({ name: 'John' })
});

// Браузер отправляет:
/*
OPTIONS /users HTTP/1.1
Host: api.example.com
Origin: https://example.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: x-custom-header
*/

// Сервер отвечает:
/*
HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: x-custom-header
Access-Control-Max-Age: 86400
*/

// Только тогда браузер отправляет реальный POST

Cookies и Session:

Браузер автоматически отправляет cookies

// Когда браузер получает Set-Cookie:
// Set-Cookie: session=abc123; Path=/; HttpOnly

// Браузер автоматически отправляет его в следующих запросах:
fetch('https://api.example.com/users')
// Header: Cookie: session=abc123

Минимальный требуемый набор:

Для GET запроса:

• URL (обязательно)
• HTTP метод (GET по умолчанию)

Для POST запроса:

• URL (обязательно)
• HTTP метод (POST)
• Body (обязательно, может быть пустой)
• Headers с Content-Type (рекомендуется)

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

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [error, setError] = useState(null);
  
  useEffect(() => {
    // Отправляем запрос
    fetch(`https://api.example.com/users/${userId}`, {
      method: 'GET',
      headers: {
        'Authorization': 'Bearer token',
        'Content-Type': 'application/json'
      }
    })
      .then(response => {
        if (!response.ok) throw new Error('Failed to fetch');
        return response.json();
      })
      .then(setUser)
      .catch(setError);
  }, [userId]);
  
  if (error) return <div>Error: {error.message}</div>;
  if (!user) return <div>Loading...</div>;
  
  return <div>{user.name}</div>;
}

Итоговый ответ:

Браузеру нужно:

1. URL — куда отправить
2. HTTP метод — что делать (GET, POST, etc.)
3. Headers — метаинформация (авторизация, тип)
4. Body — данные (для POST, PUT, PATCH)
5. CORS permissions — разрешение сервера

Браузер автоматически добавляет User-Agent, Cookies, Referer и другую служебную информацию.