✔️ Бэкенд развёрнут на стейдже.

❓ Как в три счёта запустить локально фронтенд и подключиться к API?

1️⃣ Чтобы корректно работал OIDC (SSO) и прочая инфраструктура, тебе потребуется локальный домен. Возможно, твоя корпоративная сеть уже подразумевает какой то wildcard вида *.dev.example.com, который ведёт на 127.0.0.1. Если нет - прописывай foo.dev.example.com в hosts-файл.

2️⃣ При попытке обратиться к API в контексте dev-домена ты упрёшься в CORS. Если инфраструктура позволяет настроить заголовки на стейдже, можно добавить dev-домен в список разрешённых. Есть другое решение. Оно не требует добавления фиктивных доменных имён в настройки инфраструктуры.

3️⃣ Локальный реверс-прокси может принимать все запросы на dev-домене и транслировать запросы к API на стейдж. Раньше я поднимал для этого локальный экземпляр nginx. Современный фронтенд предлагает все необходимые инструменты "из коробки".

👀 Рассмотрим на примере Vite:

export default defineConfig({
  plugins: [basicSsl(), react()],
  server: {
    port: 3000,
    https: true,
    cors: false,
    proxy: {
      "/api": {
        target: "https://foo.stg.example.com",
        changeOrigin: true
      }
    }
  }
})

⚠️ Имей ввиду, что без changeOrigin твой реверс-прокси будет транслировать сертификат с бэкенда, который, скорее всего, будет недействителен для dev-домена.

✔️ Всё. Наслаждайся фронтенд-разработкой без поднятия локального бэкенда.

#frontend #javascript #infrastructure #cors #reverse_proxy #oidc #sso #vite