Где получить адрес хоста?

Как получить адрес хоста в JavaScript

Адрес хоста - это домен или IP адрес сервера который обслуживает приложение. В JavaScript есть несколько способов получить эту информацию в зависимости от контекста и задачи.

Основной способ: window.location

Объект window.location содержит всю информацию о текущем URL и хосте:

// Полный URL: https://example.com:3000/path/to/page?search=query#section

// Получить только хост (домен + порт)
window.location.host; // "example.com:3000"

// Получить только домен (без порта)
window.location.hostname; // "example.com"

// Получить только порт
window.location.port; // "3000"

// Получить полный протокол с хостом
window.location.origin; // "https://example.com:3000"

// Получить весь URL
window.location.href; // "https://example.com:3000/path?search=query#section"

// Получить путь
window.location.pathname; // "/path/to/page"

// Получить параметры
window.location.search; // "?search=query"

// Получить якорь
window.location.hash; // "#section"

// Получить протокол
window.location.protocol; // "https:"

Практические примеры

1. Отправить запрос на свой сервер

// Плохо - хардкод
fetch('https://example.com:3000/api/data');

// Хорошо - динамически
fetch(`${window.location.origin}/api/data`);
// Работает везде: localhost:3000, example.com, staging.example.com

2. Проверить окружение (development vs production)

function isProduction() {
  return window.location.hostname === 'example.com';
}

function isDevelopment() {
  return window.location.hostname === 'localhost' || 
         window.location.hostname === '127.0.0.1';
}

if (isDevelopment()) {
  console.log('MODE: Development');
} else {
  console.log('MODE: Production');
}

3. Построить API базовый URL

// Конфигурация API
const API_BASE_URL = (() => {
  const { protocol, hostname, port } = window.location;
  
  // На localhost используй 8000 для бэкенда
  if (hostname === 'localhost') {
    return `${protocol}//localhost:8000`;
  }
  
  // На продакшене используй тот же хост
  return `${protocol}//${hostname}`;
})();

const API_ENDPOINTS = {
  users: `${API_BASE_URL}/api/v1/users`,
  posts: `${API_BASE_URL}/api/v1/posts`,
  comments: `${API_BASE_URL}/api/v1/comments`,
};

// Использование
fetch(API_ENDPOINTS.users);

4. Редирект на другой домен

// Перенаправить на новый домен
if (window.location.hostname === 'old-domain.com') {
  window.location.href = window.location.href.replace(
    'old-domain.com',
    'new-domain.com'
  );
}

// Или проще
window.location.hostname = 'new-domain.com';

5. Получить параметры из URL

// URL: https://example.com?user=john&role=admin

const params = new URLSearchParams(window.location.search);
const user = params.get('user'); // "john"
const role = params.get('role'); // "admin"

// Или вручную
function getUrlParams() {
  const params = {};
  const searchParams = new URLSearchParams(window.location.search);
  for (const [key, value] of searchParams) {
    params[key] = value;
  }
  return params;
}

Node.js (Серверная часть)

Если нужен хост на сервере:

// Express.js
app.get('/api/data', (req, res) => {
  // Получить хост из headers
  const host = req.get('host'); // "example.com:3000"
  const hostname = req.hostname; // "example.com"
  const port = req.port; // 3000
  const protocol = req.protocol; // "http" или "https"
  const originalUrl = req.originalUrl; // "/api/data?filter=all"
  
  // Построить origin
  const origin = `${req.protocol}://${req.get('host')}`;
  
  res.json({ host, origin });
});

// Plain Node.js
const http = require('http');

const server = http.createServer((req, res) => {
  const host = req.headers.host; // "example.com:3000"
  const url = req.url; // "/path?query=1"
  
  res.writeHead(200, { 'Content-Type': 'application/json' });
  res.end(JSON.stringify({ host, url }));
});

Получение хоста в разных контекстах

В React компоненте

import { useEffect, useState } from 'react';

function ApiConfig() {
  const [apiUrl, setApiUrl] = useState<string>('');
  
  useEffect(() => {
    // Определи API URL при загрузке
    const url = `${window.location.origin}/api/v1`;
    setApiUrl(url);
  }, []);
  
  return <div>API URL: {apiUrl}</div>;
}

В Next.js

// В компоненте (клиент)
function MyComponent() {
  const apiUrl = typeof window !== 'undefined' 
    ? `${window.location.origin}/api`
    : process.env.NEXT_PUBLIC_API_URL;
  
  return <div>{apiUrl}</div>;
}

// Или через getServerSideProps (сервер)
export async function getServerSideProps({ req }) {
  const protocol = req.headers['x-forwarded-proto'] || 'http';
  const host = req.headers.host;
  const apiUrl = `${protocol}://${host}/api`;
  
  return { props: { apiUrl } };
}

В тестах (Jest, Vitest)

test('should use correct API URL', () => {
  // Mock window.location
  delete window.location;
  window.location = { origin: 'https://test.example.com' };
  
  const apiUrl = `${window.location.origin}/api`;
  expect(apiUrl).toBe('https://test.example.com/api');
});

Использование переменных окружения (РЕКОМЕНДУЕТСЯ)

Для гибкости лучше использовать env переменные:

// .env
REACT_APP_API_URL=https://api.example.com

// .env.development
REACT_APP_API_URL=http://localhost:8000

// В коде
const API_URL = process.env.REACT_APP_API_URL;
fetch(`${API_URL}/users`);

// Next.js
// .env.local
NEXT_PUBLIC_API_URL=https://api.example.com

// В коде
fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/users`);

Полезные helper функции

// Определить является ли localhost
function isLocalhost() {
  return window.location.hostname === 'localhost' || 
         window.location.hostname === '127.0.0.1' ||
         window.location.hostname === '[::1]'; // IPv6 localhost
}

// Определить является ли безопасное соединение
function isSecure() {
  return window.location.protocol === 'https:';
}

// Получить API URL в зависимости от окружения
function getApiUrl() {
  if (isLocalhost()) {
    return 'http://localhost:8000';
  }
  
  if (isSecure()) {
    return `https://api.${window.location.hostname}`;
  }
  
  return `http://api.${window.location.hostname}`;
}

// Получить полный URL для API
function getFullApiUrl(endpoint) {
  const baseUrl = getApiUrl();
  return `${baseUrl}/api/v1${endpoint}`;
}

// Использование
fetch(getFullApiUrl('/users'));

Common ошибки

// Ошибка 1: Хардкодить хост
fetch('https://example.com/api/data'); // ❌
fetch(`${window.location.origin}/api/data`); // ✓

// Ошибка 2: Использовать window.location в Node.js
// window.location доступен только в браузере!
const host = window.location.hostname; // ❌ ReferenceError

// Ошибка 3: Забыть про порт
const url = `${window.location.hostname}/api`; // ❌ Может быть неправильный порт
const url = `${window.location.origin}/api`; // ✓ Включает порт

// Ошибка 4: Не учитывать CORS
// Если API на другом домене - нужна CORS конфигурация

Best Practices

1. Используй window.location.origin для построения API URL (включает все: протокол, домен, порт)
2. Никогда не хардкодь хост - используй динамические значения
3. Используй переменные окружения для разных окружений
4. Проверяй availability window.location только в браузере (не в SSR/Node.js)
5. Кэшируй API URL если используется часто

// Good pattern
const API_BASE_URL = process.env.REACT_APP_API_URL || window.location.origin;
const API = {
  users: `${API_BASE_URL}/api/v1/users`,
  posts: `${API_BASE_URL}/api/v1/posts`,
};

// Используй везде
fetch(API.users);

Вывод

Получить адрес хоста в JavaScript просто:

• Browser: используй window.location
• Node.js: используй req.headers.host или переменные окружения
• Best practice: используй env переменные для гибкости
• Никогда не хардкодь хосты в коде