nginx/nginx.conf

@@ -28,6 +28,9 @@ server{
     ssl_ciphers         HIGH:!aNULL:!MD5;
     
     set $backend_server 172.18.10.8:8080;
+    set $meshserver 172.18.10.8:8082;
+    # MeshCentral traffic should go through backend proxy controller
+    # (api/meshcentral/proxy/*) for consistent auth/cookie/header handling.
     
     root /usr/share/nginx/html;
     # Default file to serve for directory requests
@@ -81,13 +84,76 @@ server{
         proxy_read_timeout 1h;
     }
 
-    location /mesh-proxy/ {
+    # MeshCentral client builds WebSocket URL from current location,
-        proxy_pass https://202.191.59.59/; 
+    # e.g. wss://comp.soict.io/control.ashx. Route these root endpoints
-        proxy_cookie_path / "/; HTTPOnly; Secure; SameSite=None";
+    # to meshserver so browser URL stays on comp.soict.io while upstream
+    # is forced to 172.18.10.8:8082.
+    location ~ ^/(control|meshrelay|commander|mesh)\.ashx$ {
+        proxy_pass https://$meshserver;
+        proxy_ssl_verify off;
 
-        # Cấu hình WebSocket cho commander.ashx
         proxy_http_version 1.1;
         proxy_set_header Upgrade $http_upgrade;
         proxy_set_header Connection "upgrade";
+
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_set_header X-Forwarded-Host $host;
+
+        proxy_read_timeout 3600s;
+        proxy_send_timeout 3600s;
+        proxy_buffering off;
+    }
+
+    location = /api/meshcentral/proxy {
+        return 301 /api/meshcentral/proxy/;
+    }
+
+    location ^~ /api/meshcentral/proxy/ {
+        # Forward to backend MeshCentralProxyController (api/meshcentral/proxy/*)
+        # so backend can handle MeshCentral auth/session consistently.
+        proxy_pass http://$backend_server;
+        proxy_cookie_path / "/; HTTPOnly; Secure; SameSite=None";
+
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_set_header X-Forwarded-Host $host;
+
+        # Cấu hình WebSocket/SSE cho MeshCentral
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection "upgrade";
+        proxy_buffering off;
+        proxy_read_timeout 3600s;
+        proxy_send_timeout 3600s;
+    }
+
+    # FE production currently builds mesh proxy path as /meshapi/api/meshcentral/proxy/...
+    location = /meshapi/api/meshcentral/proxy {
+        return 301 /meshapi/api/meshcentral/proxy/;
+    }
+
+    location ^~ /meshapi/api/meshcentral/proxy/ { 
+        # Legacy frontend path -> backend MeshCentralProxyController
+        rewrite ^/meshapi/api/meshcentral/proxy/(.*)$ /$1 break;
+        proxy_pass http://$backend_server;
+        proxy_cookie_path / "/; HTTPOnly; Secure; SameSite=None";
+
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_set_header X-Forwarded-Host $host;
+
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection "upgrade";
+        proxy_buffering off;
+        proxy_read_timeout 3600s;
+        proxy_send_timeout 3600s;
     }
 }

src/components/cards/computer-card.tsx

@@ -8,7 +8,7 @@ import { useGetClientFolderStatusForDevice } from "@/hooks/queries";
 import type { ClientFolderStatus } from "@/types/folder";
 import { Button } from "@/components/ui/button";
 import { getRemoteDesktopUrl } from "@/services/remote-control.service";
-import { BASE_URL } from "@/config/api";
+import { buildMeshProxyUrl } from "@/config/api";
 import { toast } from "sonner";
 export function ComputerCard({
   device,
@@ -52,11 +52,7 @@ export function ComputerCard({
       const response = await getRemoteDesktopUrl(device.id);
       const originalUrl = new URL(response.url);
       const pathAndQuery = originalUrl.pathname + originalUrl.search;
-      const cleanPath = pathAndQuery.startsWith("/")
+      const proxyUrlFull = buildMeshProxyUrl(pathAndQuery);
-        ? pathAndQuery.substring(1)
-        : pathAndQuery;
-      const baseWithoutApi = BASE_URL.replace("/api", "");
-      const proxyUrlFull = `${baseWithoutApi}/api/meshcentral/proxy/${cleanPath}`;
 
       setProxyUrl(proxyUrlFull);
       setShowRemote(true);

src/config/api.ts

@@ -1,12 +1,39 @@
 const isDev = import.meta.env.MODE === "development";
 
+const trimTrailingSlash = (value: string) => value.replace(/\/+$/, "");
+
 export const BASE_URL = isDev
   ? import.meta.env.VITE_API_URL_DEV
   : "/api";
 
 export const BASE_MESH_URL = isDev
-  ? import.meta.env.VITE_API_MESH_DEV
+  ? (import.meta.env.VITE_API_MESH || import.meta.env.VITE_API_MESH_DEV || "")
-  : "/meshapi";
+  : (import.meta.env.VITE_API_MESH || "");
+
+export const buildMeshProxyUrl = (meshPathAndQuery: string) => {
+  const cleanPath = meshPathAndQuery.startsWith("/")
+    ? meshPathAndQuery.substring(1)
+    : meshPathAndQuery;
+  const proxyPath = `/api/meshcentral/proxy/${cleanPath}`;
+
+  // If an explicit mesh host is configured, always use it.
+  // This allows forcing proxy URLs to https://<IP>:<port>/api/meshcentral/proxy/...
+  if (BASE_MESH_URL && BASE_MESH_URL.startsWith("http")) {
+    return `${trimTrailingSlash(BASE_MESH_URL)}${proxyPath}`;
+  }
+
+  // In development, BASE_URL is usually absolute (e.g. http://localhost:5218/api).
+  // Build an absolute proxy URL to backend so iframe requests do not hit Vite dev server.
+  if (BASE_URL.startsWith("http")) {
+    const apiBase = trimTrailingSlash(BASE_URL);
+    const backendOrigin = apiBase.endsWith("/api")
+      ? apiBase.slice(0, -4)
+      : apiBase;
+    return `${backendOrigin}${proxyPath}`;
+  }
+
+  return proxyPath;
+};
 
 export const API_ENDPOINTS = {
   AUTH: {

src/routes/_auth/remote-control/index.tsx

@@ -6,7 +6,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/com
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { getRemoteDesktopUrl } from "@/services/remote-control.service";
-import { BASE_URL } from "@/config/api";
+import { buildMeshProxyUrl } from "@/config/api";
 
 
 export const Route = createFileRoute("/_auth/remote-control/")({
@@ -38,9 +38,7 @@ function RemoteControlPage() {
       // Chuyển URL MeshCentral thành proxy URL
       const originalUrl = new URL(data.url);
       const pathAndQuery = originalUrl.pathname + originalUrl.search;
-      const cleanPath = pathAndQuery.startsWith('/') ? pathAndQuery.substring(1) : pathAndQuery;
+      const proxyUrlFull = buildMeshProxyUrl(pathAndQuery);
-      const baseWithoutApi = BASE_URL.replace('/api', '');
-      const proxyUrlFull = `${baseWithoutApi}/api/meshcentral/proxy/${cleanPath}`;
       
       console.log("[RemoteControl] Proxy URL:", proxyUrlFull);
       setProxyUrl(proxyUrlFull);