diff --git a/web/packages/studio/env/.env.dev.local.sample b/web/packages/studio/env/.env.dev.local.sample index 2d6d1f8a17..04fd1146a5 100644 --- a/web/packages/studio/env/.env.dev.local.sample +++ b/web/packages/studio/env/.env.dev.local.sample @@ -5,6 +5,13 @@ VITE_IS_LOC_ENV='true' VITE_OTEL_EXPORTER_OTLP_ENDPOINT="http://localhost:4318/v1/traces" VITE_OTEL_SERVICE_NAME="nemo-studio-ui" VITE_PLATFORM_BASE_URL='http://localhost:8080' +# Optional: route platform `/apis` requests through the Vite dev-server proxy. +# When VITE_PLATFORM_BASE_URL is set to an empty string AND this is set, the app +# makes same-origin requests and Vite forwards them to this domain server-side. +# Use this to avoid Safari's mixed-content block when the dev server is HTTPS +# (mkcert) but the platform is plain HTTP. To enable: set VITE_PLATFORM_BASE_URL='' +# and VITE_PLATFORM_PROXY_DOMAIN='http://localhost:8080'. +# VITE_PLATFORM_PROXY_DOMAIN='http://localhost:8080' VITE_TELEMETRY_ENABLED="false" VITE_AUTH_CLIENT_ID="" VITE_AUTH_AUTHORITY="https://login.microsoftonline.com//v2.0" diff --git a/web/packages/studio/vite.config.ts b/web/packages/studio/vite.config.ts index 5019dccc00..f280de4fa1 100644 --- a/web/packages/studio/vite.config.ts +++ b/web/packages/studio/vite.config.ts @@ -143,11 +143,24 @@ const formatLicenseReport = (dependencies: Dependency[]): string => // eslint-disable-next-line import/no-default-export export default defineConfig(({ mode }) => { // Load env file based on mode (e.g., .env.fastapi for --mode fastapi) - const { VITE_BASE_URL, VITE_DEV_SERVER_HOST } = loadEnv(mode, './env'); + const { + VITE_BASE_URL, + VITE_DEV_SERVER_HOST, + VITE_PLATFORM_BASE_URL, + VITE_PLATFORM_PROXY_DOMAIN, + } = loadEnv(mode, './env'); const devServerHost = VITE_DEV_SERVER_HOST?.trim() || 'localhost'; // Use VITE_BASE_URL to host the app at a subpath (fast mode) const base = ['fastapi'].includes(mode) && VITE_BASE_URL ? `/${VITE_BASE_URL}` : '/'; + // Dev-server proxy: when VITE_PLATFORM_BASE_URL is empty the app issues + // same-origin `/apis/...` requests, so the browser only ever talks to the + // (HTTPS) dev server and Vite forwards to the plain-HTTP platform server-side. + // This avoids Safari's mixed-content block on an HTTPS page calling http://. + // Gated on VITE_PLATFORM_PROXY_DOMAIN so it stays opt-in per developer. + const proxyDomain = VITE_PLATFORM_PROXY_DOMAIN?.trim(); + const shouldProxyPlatform = VITE_PLATFORM_BASE_URL?.trim() === '' && Boolean(proxyDomain); + // Skip mkcert in tests/CI: it fetches GitHub API for releases and hits rate limits (403) in CI. const plugins = [ react(), @@ -191,6 +204,17 @@ export default defineConfig(({ mode }) => { server: { host: devServerHost, port: 5173, + ...(shouldProxyPlatform + ? { + proxy: { + '/apis': { + target: proxyDomain, + changeOrigin: true, + secure: false, + }, + }, + } + : {}), }, worker: { format: 'es',