implemented API interception

Author: gpproton

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "traccar",
+  "name": "@tang/traccar",
   "version": "6.5.0",
   "type": "module",
   "private": true,
@@ -21,6 +21,7 @@
     "@vitejs/plugin-react": "^4.3.1",
     "dayjs": "^1.11.13",
     "events": "^3.3.0",
+    "fetch-intercept": "^2.4.0",
     "mapbox-gl": "^1.13.3",
     "maplibre-gl": "^4.7.0",
     "maplibre-google-maps": "^1.1.0",
@@ -40,11 +41,15 @@
     "vite": "^5.4.6",
     "vite-plugin-pwa": "^0.20.5",
     "vite-plugin-svgr": "^4.2.0",
-    "wellknown": "^0.5.0"
+    "wellknown": "^0.5.0",
+    "whatwg-fetch": "^3.6.20"
   },
   "scripts": {
     "start": "vite",
     "build": "vite build",
+    "start:custom": "VITE_SERVER_PROTOCOL=https: VITE_SERVER_URL=demo.traccar.org vite",
+    "dev": "npm run start:custom",
+    "build:app": "npm run start:custom build",
     "generate-pwa-assets": "pwa-assets-generator --preset minimal public/logo.svg",
     "lint": "eslint .",
     "lint:fix": "eslint --fix ."

package.json

@@ -33,8 +33,9 @@ const SocketController = () => {
   const features = useFeatures();
 
   const connectSocket = () => {
-    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-    const socket = new WebSocket(`${protocol}//${window.location.host}/api/socket`);
+    const protocol = import.meta.env.VITE_SERVER_PROTOCOL ?? window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const host = import.meta.env.VITE_SERVER_URL ?? window.location.host;
+    const socket = new WebSocket(`${protocol}//${host}/api/socket`);
     socketRef.current = socket;
 
     socket.onopen = () => {

src/SocketController.jsx

@@ -12,9 +12,29 @@ import NativeInterface from './common/components/NativeInterface';
 import ServerProvider from './ServerProvider';
 import ErrorBoundary from './ErrorBoundary';
 import AppThemeProvider from './AppThemeProvider';
+import fetchIntercept from 'fetch-intercept';
 
 preloadImages();
 
+/** Setup API inteception */
+fetchIntercept.register({
+  request: function (url, config) {
+    const serverUrl = import.meta.env.VITE_SERVER_URL;
+    const apiUrl = url.length > 0 ? (url.startsWith('/api') ? url : null) : null;
+    if (serverUrl && apiUrl) {
+      const serverProtocol = import.meta.env.VITE_SERVER_PROTOCOL ?? window.location.protocol;
+      url = `${serverProtocol}//${serverUrl}${url}`
+      config = {
+        ...config,
+        credentials: 'include',
+        mode: 'cors',
+      }
+    }
+
+    return [url, config];
+  },
+});
+
 const root = createRoot(document.getElementById('root'));
 root.render(
   <ErrorBoundary>

src/index.jsx

@@ -7,7 +7,9 @@ import {
 import { useNavigate } from 'react-router-dom';
 import { useTranslation } from '../common/components/LocalizationProvider';
 
-const currentServer = `${window.location.protocol}//${window.location.host}`;
+const protocol = import.meta.env.VITE_SERVER_PROTOCOL ?? window.location.protocol
+const serverUrl = import.meta.env.VITE_SERVER_URL ?? window.location.host;
+const currentServer = `${protocol}//${serverUrl}`;
 
 const officialServers = [
   currentServer,

src/login/ChangeServerPage.jsx

@@ -85,7 +85,9 @@ const EmulatorPage = () => {
         params.append('id', devices[deviceId].uniqueId);
         params.append('lat', latitude);
         params.append('lon', longitude);
-        response = await fetch(`http://${window.location.hostname}:5055?${params.toString()}`, {
+        const protocol = import.meta.env.VITE_SERVER_PROTOCOL ?? window.location.protocol
+        const serverUrl = import.meta.env.VITE_SERVER_URL ?? window.location.host;
+        response = await fetch(`${protocol}//${serverUrl}:5055?${params.toString()}`, {
           method: 'POST',
           mode: 'no-cors',
         });