feat(CORS): add CORS middleware to allow all origins and update ws URL handling for dev

Author: 0xJacky

app/.env

@@ -1 +1 @@
-VITE_PROXY_TARGET=http://127.0.0.1:9000
+VITE_PROXY_TARGET=http://127.0.0.1:9001

app/pnpm-lock.yaml

@@ -17,12 +17,40 @@ export interface SSEOptions {
   reconnectInterval?: number
 }
 
+/**
+ * Build SSE URL based on environment
+ */
+function buildSSEUrl(url: string): string {
+  // In development mode, connect directly to backend server
+  if (import.meta.env.DEV) {
+    const proxyTarget = import.meta.env.VITE_PROXY_TARGET || 'http://localhost:9000'
+
+    return urlJoin(proxyTarget, url)
+  }
+
+  // In production mode, use relative path
+  return urlJoin(window.location.pathname, url)
+}
+
 /**
  * SSE Composable
  * Provide the ability to create, manage, and automatically clean up SSE connections
  */
 export function useSSE() {
   const sseInstance = shallowRef<SSE>()
+  const reconnectTimer = shallowRef<ReturnType<typeof setTimeout>>()
+  const isReconnecting = ref(false)
+  const currentOptions = shallowRef<SSEOptions>()
+
+  /**
+   * Clear reconnect timer
+   */
+  function clearReconnectTimer() {
+    if (reconnectTimer.value) {
+      clearTimeout(reconnectTimer.value)
+      reconnectTimer.value = undefined
+    }
+  }
 
   /**
    * Connect to SSE service
@@ -36,7 +64,18 @@ export function useSSE() {
       reconnectInterval = 5000,
     } = options
 
-    const fullUrl = urlJoin(window.location.pathname, url)
+    // Store current options for reconnection
+    currentOptions.value = options
+
+    // Clear any existing reconnect timer
+    clearReconnectTimer()
+
+    // Disconnect existing connection before creating new one
+    if (sseInstance.value) {
+      sseInstance.value.close()
+    }
+
+    const fullUrl = buildSSEUrl(url)
 
     const headers: Record<string, string> = {}
 
@@ -58,6 +97,9 @@ export function useSSE() {
         return
       }
 
+      // Reset reconnecting state on successful message
+      isReconnecting.value = false
+
       try {
         const parsedData = parseData ? JSON.parse(e.data) : e.data
         onMessage?.(parsedData)
@@ -71,10 +113,19 @@ export function useSSE() {
     sse.onerror = () => {
       onError?.()
 
-      // Reconnect logic
-      setTimeout(() => {
-        connect(options)
-      }, reconnectInterval)
+      // Only attempt reconnection if not already reconnecting and we have current options
+      if (!isReconnecting.value && currentOptions.value) {
+        isReconnecting.value = true
+
+        // Clear any existing timer before setting new one
+        clearReconnectTimer()
+
+        reconnectTimer.value = setTimeout(() => {
+          if (currentOptions.value && isReconnecting.value) {
+            connect(currentOptions.value)
+          }
+        }, reconnectInterval)
+      }
     }
 
     sseInstance.value = sse
@@ -85,6 +136,11 @@ export function useSSE() {
    * Disconnect SSE connection
    */
   function disconnect() {
+    // Clear reconnect timer and state
+    clearReconnectTimer()
+    isReconnecting.value = false
+    currentOptions.value = undefined
+
     if (sseInstance.value) {
       sseInstance.value.close()
       sseInstance.value = undefined
@@ -102,5 +158,6 @@ export function useSSE() {
     connect,
     disconnect,
     sseInstance,
+    isReconnecting: readonly(isReconnecting),
   }
 }

app/src/composables/useSSE.ts

@@ -638,7 +638,7 @@ msgstr "لا يمكن المقارنة: المحتوى المفقود"
 msgid "Cannot delete protected path: {0}"
 msgstr "لا يمكن حذف المسار المحمي: {0}"
 
-#: src/views/dashboard/NginxDashBoard.vue:129
+#: src/views/dashboard/NginxDashBoard.vue:134
 msgid "Cannot get performance data in this state"
 msgstr "لا يمكن الحصول على بيانات الأداء في هذه الحالة"
 
@@ -1064,7 +1064,7 @@ msgstr "تأكيد كلمة المرور الجديدة"
 msgid "Connected"
 msgstr "متصل"
 
-#: src/views/dashboard/NginxDashBoard.vue:82
+#: src/views/dashboard/NginxDashBoard.vue:87
 msgid "Connection error, trying to reconnect..."
 msgstr "خطأ في الاتصال، جاري محاولة إعادة الاتصال..."
 
@@ -1723,7 +1723,7 @@ msgstr "فشل تمكين الدفق %{name} على %{node}"
 msgid "Enable stream %{name} on %{node} successfully"
 msgstr "تم تمكين الدفق %{name} على %{node} بنجاح"
 
-#: src/views/dashboard/NginxDashBoard.vue:147
+#: src/views/dashboard/NginxDashBoard.vue:152
 msgid "Enable stub_status module"
 msgstr "تمكين وحدة stub_status"
 
@@ -2306,7 +2306,7 @@ msgstr "توليد مفتاح خاص لتسجيل الحساب"
 msgid "Get acme user error: {0}"
 msgstr "خطأ في الحصول على مستخدم ACME: {0}"
 
-#: src/views/dashboard/NginxDashBoard.vue:138
+#: src/views/dashboard/NginxDashBoard.vue:143
 msgid "Get data failed"
 msgstr "فشل الحصول على البيانات"
 
@@ -2637,7 +2637,7 @@ msgstr "وقت آخر نسخة احتياطية"
 msgid "Last checked at"
 msgstr "آخر فحص في"
 
-#: src/views/dashboard/NginxDashBoard.vue:113
+#: src/views/dashboard/NginxDashBoard.vue:118
 msgid "Last update"
 msgstr "آخر تحديث"
 
@@ -2724,7 +2724,7 @@ msgstr "وقت توقف المحمل"
 msgid "Loader Threshold"
 msgstr "عتبة المحمل"
 
-#: src/views/dashboard/NginxDashBoard.vue:175
+#: src/views/dashboard/NginxDashBoard.vue:180
 msgid "Loading data..."
 msgstr "جارٍ تحميل البيانات..."
 
@@ -2767,11 +2767,11 @@ msgstr ""
 msgid "Log List"
 msgstr "قائمة السجلات"
 
-#: src/routes/modules/auth.ts:14 src/views/other/Login.vue:263
+#: src/routes/modules/auth.ts:14 src/views/other/Login.vue:267
 msgid "Login"
 msgstr "تسجيل الدخول"
 
-#: src/views/other/Login.vue:75
+#: src/views/other/Login.vue:76
 msgid "Login successful"
 msgstr "تم تسجيل الدخول بنجاح"
 
@@ -3022,7 +3022,7 @@ msgstr "توجيه متعدد الأسطر"
 msgid "Name"
 msgstr "اسم"
 
-#: src/views/dashboard/NginxDashBoard.vue:170
+#: src/views/dashboard/NginxDashBoard.vue:175
 msgid "Need to enable the stub_status module"
 msgstr "يجب تمكين وحدة stub_status"
 
@@ -3174,8 +3174,8 @@ msgstr "خطأ في Nginx: {0}"
 
 #: src/components/NgxConfigEditor/NginxStatusAlert.vue:15
 #: src/composables/useNginxPerformance.ts:43
-#: src/views/dashboard/NginxDashBoard.vue:109
-#: src/views/dashboard/NginxDashBoard.vue:128
+#: src/views/dashboard/NginxDashBoard.vue:114
+#: src/views/dashboard/NginxDashBoard.vue:133
 #: src/views/dashboard/NginxDashBoard.vue:77
 msgid "Nginx is not running"
 msgstr "Nginx لا يعمل"
@@ -3184,7 +3184,7 @@ msgstr "Nginx لا يعمل"
 msgid "Nginx is not running in another container"
 msgstr "إن Nginx لا يعمل في حاوية أخرى"
 
-#: src/views/dashboard/NginxDashBoard.vue:109
+#: src/views/dashboard/NginxDashBoard.vue:114
 msgid "Nginx is running"
 msgstr "إن Nginx يعمل"
 
@@ -3296,7 +3296,7 @@ msgstr "لا"
 msgid "No Action"
 msgstr "لا إجراء"
 
-#: src/views/dashboard/NginxDashBoard.vue:177
+#: src/views/dashboard/NginxDashBoard.vue:182
 msgid "No data"
 msgstr "لا توجد بيانات"
 
@@ -3487,7 +3487,7 @@ msgstr "مفتوح"
 msgid "OpenAI"
 msgstr "أوبن أي آي"
 
-#: src/components/TwoFA/Authorization.vue:100 src/views/other/Login.vue:272
+#: src/components/TwoFA/Authorization.vue:100 src/views/other/Login.vue:276
 msgid "Or"
 msgstr "أو"
 
@@ -3560,7 +3560,7 @@ msgstr ""
 "التعرف على الوجه أو كلمة مرور الجهاز أو رقم التعريف الشخصي. يمكن استخدامها "
 "كبديل لكلمة المرور أو كطريقة للمصادقة الثنائية."
 
-#: src/views/other/Login.vue:224 src/views/user/userColumns.tsx:16
+#: src/views/other/Login.vue:228 src/views/user/userColumns.tsx:16
 msgid "Password"
 msgstr "كلمة المرور"
 
@@ -3622,7 +3622,7 @@ msgstr "خطأ في تنفيذ ترقية النواة"
 msgid "Performance"
 msgstr "الأداء"
 
-#: src/views/dashboard/NginxDashBoard.vue:182
+#: src/views/dashboard/NginxDashBoard.vue:187
 msgid "Performance Metrics"
 msgstr "مقاييس الأداء"
 
@@ -3646,7 +3646,7 @@ msgstr "مسار PID غير موجود"
 msgid "Plain text is empty"
 msgstr "النص العادي فارغ"
 
-#: src/views/dashboard/NginxDashBoard.vue:171
+#: src/views/dashboard/NginxDashBoard.vue:176
 msgid ""
 "Please enable the stub_status module to get request statistics, connection "
 "count, etc."
@@ -4625,7 +4625,7 @@ msgstr "منطقة الذاكرة المشتركة"
 msgid "Show"
 msgstr "عرض"
 
-#: src/views/other/Login.vue:281
+#: src/views/other/Login.vue:285
 msgid "Sign in with a passkey"
 msgstr "تسجيل الدخول باستخدام مفتاح المرور"
 
@@ -4730,7 +4730,7 @@ msgstr "مسار مفتاح SSL"
 msgid "SSL key path is required when HTTPS is enabled"
 msgstr "مسار مفتاح SSL مطلوب عند تمكين HTTPS"
 
-#: src/views/other/Login.vue:238
+#: src/views/other/Login.vue:242
 msgid "SSO Login"
 msgstr "تسجيل الدخول عبر SSO"
 
@@ -5169,7 +5169,7 @@ msgid ""
 "_./:"
 msgstr "يجب أن يحتوي هذا الحقل على أحرف وأحرف يونيكود وأرقام و -_./: فقط"
 
-#: src/views/dashboard/NginxDashBoard.vue:150
+#: src/views/dashboard/NginxDashBoard.vue:155
 msgid ""
 "This module provides Nginx request statistics, connection count, etc. data. "
 "After enabling it, you can view performance statistics"
@@ -5481,7 +5481,7 @@ msgstr "المستخدم لم يتم تفعيل OTP كعامل ثنائي"
 msgid "User Profile"
 msgstr "ملف المستخدم"
 
-#: src/views/other/Login.vue:214 src/views/user/userColumns.tsx:7
+#: src/views/other/Login.vue:218 src/views/user/userColumns.tsx:7
 #: src/views/user/UserProfile.vue:127 src/views/user/UserProfile.vue:131
 msgid "Username"
 msgstr "اسم المستخدم"