fix: vite config and routes to support no slashes, and api interceptor for fetch (#3824)

* Fix vite config and routes to support no slashes

* Added fetch intercept to add custom headers into fetch calls

src/frontend/package-lock.json

@@ -48,6 +48,7 @@
         "elkjs": "^0.9.3",
         "emoji-regex": "^10.3.0",
         "esbuild": "^0.21.5",
+        "fetch-intercept": "^2.4.0",
         "file-saver": "^2.0.5",
         "framer-motion": "^11.2.10",
         "fuse.js": "^7.0.0",
@@ -8617,6 +8618,12 @@
         "node": "^12.20 || >= 14.13"
       }
     },
+    "node_modules/fetch-intercept": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/fetch-intercept/-/fetch-intercept-2.4.0.tgz",
+      "integrity": "sha512-BPZ2LM9Dh1ua2ovQf03N6rhWg1qxdVD5qK/G4llvcemt6M+jjxCuIDxJ+6IiG+uz//3UQmgfKEv0gOGvYIxZ7g==",
+      "license": "MIT"
+    },
     "node_modules/fetch-retry": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/fetch-retry/-/fetch-retry-6.0.0.tgz",

src/frontend/package.json

@@ -43,6 +43,7 @@
     "elkjs": "^0.9.3",
     "emoji-regex": "^10.3.0",
     "esbuild": "^0.21.5",
+    "fetch-intercept": "^2.4.0",
     "file-saver": "^2.0.5",
     "framer-motion": "^11.2.10",
     "fuse.js": "^7.0.0",

src/frontend/src/controllers/API/api.tsx

@@ -2,6 +2,7 @@ import { LANGFLOW_ACCESS_TOKEN } from "@/constants/constants";
 import { useCustomApiHeaders } from "@/customization/hooks/use-custom-api-headers";
 import useAuthStore from "@/stores/authStore";
 import axios, { AxiosError, AxiosInstance, AxiosRequestConfig } from "axios";
+import * as fetchIntercept from "fetch-intercept";
 import { useContext, useEffect } from "react";
 import { Cookies } from "react-cookie";
 import { BuildStatus } from "../../constants/enums";
@@ -27,6 +28,20 @@ function ApiInterceptor() {
   const customHeaders = useCustomApiHeaders();
 
   useEffect(() => {
+    const unregister = fetchIntercept.register({
+      request: function (url, config) {
+        const accessToken = cookies.get(LANGFLOW_ACCESS_TOKEN);
+        if (accessToken && !isAuthorizedURL(config?.url)) {
+          config.headers["Authorization"] = `Bearer ${accessToken}`;
+        }
+
+        for (const [key, value] of Object.entries(customHeaders)) {
+          config.headers[key] = value;
+        }
+        return [url, config];
+      },
+    });
+
     const interceptor = api.interceptors.response.use(
       (response) => response,
       async (error: AxiosError) => {
@@ -127,6 +142,7 @@ function ApiInterceptor() {
       // Clean up the interceptors when the component unmounts
       api.interceptors.response.eject(interceptor);
       api.interceptors.request.eject(requestInterceptor);
+      unregister();
     };
   }, [accessToken, setErrorData, customHeaders, autoLogin]);
 
@@ -222,10 +238,6 @@ async function performStreamingRequest({
     // this flag is fundamental to ensure server stops tasks when client disconnects
     Connection: "close",
   };
-  const accessToken = cookies.get(LANGFLOW_ACCESS_TOKEN);
-  if (accessToken) {
-    headers["Authorization"] = `Bearer ${accessToken}`;
-  }
   const controller = new AbortController();
   useFlowStore.getState().setBuildController(controller);
   const params = {

src/frontend/src/routes.tsx

@@ -41,7 +41,7 @@ const SignUp = lazy(() => import("./pages/SignUpPage"));
 const router = createBrowserRouter(
   createRoutesFromElements([
     <Route
-      path={ENABLE_CUSTOM_PARAM ? "/:customParam" : "/"}
+      path={ENABLE_CUSTOM_PARAM ? "/:customParam?" : "/"}
       element={
         <ContextWrapper>
           <Outlet />

src/frontend/vite.config.mts

@@ -34,7 +34,7 @@ export default defineConfig(({ mode }) => {
   }, {});
 
   return {
-    basename: (BASENAME || "") + "/",
+    basename: BASENAME || "",
     build: {
       outDir: "build",
     },