feat(ui): handle proxy configs rewriting paths

We can't assume that the base URL is `host:port/` - it could be `host:port/some/path/`. Make the path handling dynamic to account for this.
invoke-ai · Jan 25, 2024 · fc448d5 · fc448d5
1 parent e59954f
commit fc448d5
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 5 deletions.
diff --git a/invokeai/frontend/web/src/app/hooks/useSocketIO.ts b/invokeai/frontend/web/src/app/hooks/useSocketIO.ts
@@ -45,7 +45,7 @@ export const useSocketIO = () => {
   const socketOptions = useMemo(() => {
     const options: Partial<ManagerOptions & SocketOptions> = {
       timeout: 60000,
-      path: '/ws/socket.io',
+      path: `${window.location.pathname}ws/socket.io`,
       autoConnect: false, // achtung! removing this breaks the dynamic middleware
       forceNew: true,
     };

diff --git a/invokeai/frontend/web/src/i18n.ts b/invokeai/frontend/web/src/i18n.ts
@@ -32,7 +32,7 @@ if (import.meta.env.MODE === 'package') {
       fallbackLng: 'en',
       debug: false,
       backend: {
-        loadPath: '/locales/{{lng}}.json',
+        loadPath: `${window.location.href.replace(/\/$/, '')}/locales/{{lng}}.json`,
       },
       interpolation: {
         escapeValue: false,

diff --git a/invokeai/frontend/web/src/services/api/index.ts b/invokeai/frontend/web/src/services/api/index.ts
@@ -57,7 +57,9 @@ const dynamicBaseQuery: BaseQueryFn<
   const projectId = $projectId.get();
 
   const rawBaseQuery = fetchBaseQuery({
-    baseUrl: `${baseUrl ?? ''}/api/v1`,
+    baseUrl: baseUrl
+      ? `${baseUrl}/api/v1`
+      : `${window.location.href.replace(/\/$/, '')}/api/v1`,
     prepareHeaders: (headers) => {
       if (authToken) {
         headers.set('Authorization', `Bearer ${authToken}`);

diff --git a/invokeai/frontend/web/src/services/api/thunks/schema.ts b/invokeai/frontend/web/src/services/api/thunks/schema.ts
@@ -26,8 +26,9 @@ export const receivedOpenAPISchema = createAsyncThunk(
   'nodes/receivedOpenAPISchema',
   async (_, { rejectWithValue }) => {
     try {
-      const url = [window.location.origin, 'openapi.json'].join('/');
-      const response = await fetch(url);
+      const response = await fetch(
+        `${window.location.href.replace(/\/$/, '')}/openapi.json`
+      );
       const openAPISchema = await response.json();
 
       const schemaJSON = JSON.parse(