Fix first-load frontend API routing for ACA private backend

Author: Ashwal-Microsoft

src/backend/app.py

@@ -160,6 +160,7 @@ def create_app() -> FastAPI:
     # app.include_router(agents_router, prefix="/api/agents", tags=["agents"])
 
     @app.get("/health")
+    @app.get("/api/health")
     async def health_check():
         """Health check endpoint."""
         return {"status": "healthy"}

src/frontend/src/api/config.js

@@ -12,10 +12,41 @@ export let config = {
   ENABLE_AUTH: false,
 };
 
-export function setApiUrl(url) {
-  if (url) {
-    API_URL = `${url}/api`;
+function resolveBrowserApiUrl(url) {
+  if (!url || typeof url !== "string") {
+    return null;
+  }
+
+  const trimmedUrl = url.trim();
+  if (!trimmedUrl) {
+    return null;
   }
+
+  const normalizedInput = trimmedUrl.replace(/\/+$/, "");
+
+  try {
+    const parsed = new URL(normalizedInput, window.location.origin);
+
+    if (parsed.origin !== window.location.origin) {
+      const backendIsLocal = parsed.hostname === "localhost" || parsed.hostname === "127.0.0.1";
+      const browserIsLocal = window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1";
+
+      // In deployed environments, enforce same-origin API access so requests
+      // flow through the frontend reverse proxy instead of direct backend calls.
+      if (!(backendIsLocal && browserIsLocal)) {
+        return null;
+      }
+    }
+
+    const normalizedParsed = parsed.toString().replace(/\/+$/, "");
+    return normalizedParsed.endsWith("/api") ? normalizedParsed : `${normalizedParsed}/api`;
+  } catch {
+    return null;
+  }
+}
+
+export function setApiUrl(url) {
+  API_URL = resolveBrowserApiUrl(url);
 }
 
 export function setEnvData(configData) {

src/frontend/src/main.jsx

@@ -6,7 +6,7 @@ import { FluentProvider, webLightTheme } from '@fluentui/react-components';
 import { Provider } from 'react-redux';
 import { store } from './store/store';
 import AuthProvider from './msal-auth/AuthProvider';
-import { setEnvData, setApiUrl, config as defaultConfig } from './api/config';
+import { setEnvData, setApiUrl, getApiUrl, config as defaultConfig } from './api/config';
 import { initializeMsalInstance } from './msal-auth/msalInstance';
 
 const Main = () => {
@@ -47,10 +47,10 @@ const Main = () => {
   async function checkConnection() {
     if (!config) return;
 
-    const baseURL = config.API_URL.replace(/\/api$/, ''); // Remove '/api' if it appears at the end
-    console.log('Checking connection to:', baseURL);
+    const healthUrl = `${getApiUrl()}/health`;
+    console.log('Checking connection to:', healthUrl);
     try {
-      await fetch(`${baseURL}/health`);
+      await fetch(healthUrl);
     } catch (error) {
       console.error('Error connecting to backend:', error);
     }