Как перейти с сайта project.com на API api.project.com?

Задача и контекст

Речь идет о переходе с веб-приложения на отдельное API домена. Это происходит, когда нужно разделить фронтенд и бэкенд на разные домены или микросервисы.

Проблемы при переходе

1. CORS (Cross-Origin Resource Sharing) - браузер блокирует запросы между доменами
2. Cookies и авторизация - проблемы с передачей credentials
3. Потеря состояния - локальное хранилище может быть недоступно
4. URL и редиректы - изменение базовых путей API

Решение 1: Настройка CORS на бэкенде

// Если бэкенд на FastAPI
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

app.add_middleware(
    CORSMiddleware,
    allow_origins=["https://project.com"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

Решение 2: Фронтенд-сторона - обновление API базового URL

// lib/api.ts
const API_BASE_URL = process.env.REACT_APP_API_URL || 'https://api.project.com';

export const apiClient = {
  async get(endpoint: string) {
    const response = await fetch(`${API_BASE_URL}${endpoint}`, {
      method: 'GET',
      credentials: 'include',
      headers: {
        'Content-Type': 'application/json',
      }
    });
    return response.json();
  },

  async post(endpoint: string, data: any) {
    const response = await fetch(`${API_BASE_URL}${endpoint}`, {
      method: 'POST',
      credentials: 'include',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data)
    });
    return response.json();
  }
};

Решение 3: Использование axios с конфигурацией

// lib/axiosInstance.ts
import axios from 'axios';

const axiosInstance = axios.create({
  baseURL: process.env.REACT_APP_API_URL || 'https://api.project.com',
  withCredentials: true,
});

axiosInstance.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('authToken');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

axiosInstance.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response?.status === 401) {
      window.location.href = 'https://project.com/login';
    }
    return Promise.reject(error);
  }
);

export default axiosInstance;

Решение 4: Environment Variables для разных окружений

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

# .env.production
REACT_APP_API_URL=https://api.project.com

Важные моменты

1. Same-Site Cookies: убедись, что cookies отправляются с правильным SameSite флагом
2. Preflight requests: OPTIONS запросы должны быть разрешены
3. Redirect URL: используй абсолютные URL для редиректов

Миграция без downtime

1. Развернуть оба домена одновременно
2. Постепенно переводить клиентов на новый API (feature flags)
3. Мониторить ошибки обоих сервисов
4. После полной миграции отключить старый API