feat:

Author: hasmokan

frontend/src/app/api/[...path]/route.ts

@@ -0,0 +1,65 @@
+/**
+ * API 代理路由
+ * 解决 HTTPS 前端无法请求 HTTP 后端的混合内容问题
+ */
+
+import { NextRequest, NextResponse } from 'next/server'
+
+// 后端服务器地址
+const BACKEND_URL = 'http://83.229.126.150:3001'
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ path: string[] }> }
+) {
+  const { path } = await params
+  const targetPath = path.join('/')
+  const searchParams = request.nextUrl.searchParams.toString()
+  const url = `${BACKEND_URL}/api/${targetPath}${searchParams ? `?${searchParams}` : ''}`
+
+  try {
+    const response = await fetch(url, {
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    })
+
+    const data = await response.json()
+    return NextResponse.json(data, { status: response.status })
+  } catch (error) {
+    console.error('[API Proxy] GET error:', error)
+    return NextResponse.json(
+      { error: 'Failed to fetch from backend' },
+      { status: 502 }
+    )
+  }
+}
+
+export async function POST(
+  request: NextRequest,
+  { params }: { params: Promise<{ path: string[] }> }
+) {
+  const { path } = await params
+  const targetPath = path.join('/')
+  const url = `${BACKEND_URL}/api/${targetPath}`
+
+  try {
+    const body = await request.json()
+    const response = await fetch(url, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(body),
+    })
+
+    const data = await response.json()
+    return NextResponse.json(data, { status: response.status })
+  } catch (error) {
+    console.error('[API Proxy] POST error:', error)
+    return NextResponse.json(
+      { error: 'Failed to fetch from backend' },
+      { status: 502 }
+    )
+  }
+}

frontend/src/app/socket.io/route.ts

@@ -0,0 +1,74 @@
+/**
+ * Socket.io 轮询代理
+ * 通过 HTTP 轮询代理 Socket.io 请求，解决 HTTPS 混合内容问题
+ */
+
+import { NextRequest, NextResponse } from 'next/server'
+
+const BACKEND_URL = 'http://83.229.126.150:3001'
+
+export async function GET(request: NextRequest) {
+  const searchParams = request.nextUrl.searchParams.toString()
+  const url = `${BACKEND_URL}/socket.io/${searchParams ? `?${searchParams}` : ''}`
+
+  try {
+    const response = await fetch(url, {
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    })
+
+    const contentType = response.headers.get('content-type') || ''
+
+    if (contentType.includes('application/json')) {
+      const data = await response.json()
+      return NextResponse.json(data, { status: response.status })
+    } else {
+      const text = await response.text()
+      return new NextResponse(text, {
+        status: response.status,
+        headers: {
+          'Content-Type': contentType,
+        },
+      })
+    }
+  } catch (error) {
+    console.error('[Socket.io Proxy] GET error:', error)
+    return NextResponse.json(
+      { error: 'Failed to connect to backend' },
+      { status: 502 }
+    )
+  }
+}
+
+export async function POST(request: NextRequest) {
+  const searchParams = request.nextUrl.searchParams.toString()
+  const url = `${BACKEND_URL}/socket.io/${searchParams ? `?${searchParams}` : ''}`
+
+  try {
+    const body = await request.text()
+    const response = await fetch(url, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'text/plain;charset=UTF-8',
+      },
+      body,
+    })
+
+    const contentType = response.headers.get('content-type') || ''
+    const text = await response.text()
+
+    return new NextResponse(text, {
+      status: response.status,
+      headers: {
+        'Content-Type': contentType,
+      },
+    })
+  } catch (error) {
+    console.error('[Socket.io Proxy] POST error:', error)
+    return NextResponse.json(
+      { error: 'Failed to connect to backend' },
+      { status: 502 }
+    )
+  }
+}

frontend/src/config/env.ts

@@ -3,17 +3,46 @@
  * 用于 ModelScope 等不支持环境变量的部署环境
  */
 
-export const ENV_CONFIG = {
-  // 后端 API 地址
-  API_URL: 'http://83.229.126.150:3001',
+// 后端服务器地址（用于服务端代理）
+export const BACKEND_URL = 'http://83.229.126.150:3001'
+
+/**
+ * 检测是否在 HTTPS 环境
+ */
+function isHttpsEnv(): boolean {
+  if (typeof window === 'undefined') return false
+  return window.location.protocol === 'https:'
+}
 
-  // WebSocket 地址
-  WS_URL: 'ws://83.229.126.150:3001',
+/**
+ * 获取 API URL
+ * HTTPS 环境使用相对路径（走 Next.js 代理），HTTP 环境直接请求
+ */
+export function getApiUrl(): string {
+  return isHttpsEnv() ? '' : BACKEND_URL
+}
 
-  // 视觉模型 API 配置（阶跃星辰）
+/**
+ * 获取 WebSocket URL
+ * HTTPS 环境禁用（返回空），HTTP 环境直接连接
+ */
+export function getWsUrl(): string {
+  return isHttpsEnv() ? '' : 'ws://83.229.126.150:3001'
+}
+
+export const ENV_CONFIG = {
+  // 视觉模型 API 配置（阶跃星辰）- 已经是 HTTPS，无需代理
   VISION_API_URL: 'https://api.stepfun.com/v1',
   VISION_API_KEY: '4FlSdYVfkMrcVqaex9PXjLUOg8b3MazJ8GdY993DymL6sN3DwEYW39HwuowYdn7xC',
   VISION_MODEL: 'step-1o-turbo-vision',
+
+  // 兼容旧代码的 getter
+  get API_URL() {
+    return getApiUrl()
+  },
+  get WS_URL() {
+    return getWsUrl()
+  },
 } as const
 
 export default ENV_CONFIG

frontend/src/hooks/useWebSocket.ts

@@ -148,15 +148,26 @@ export function useWebSocket({ url, roomId, enabled = true }: UseWebSocketOption
   useEffect(() => {
     if (!enabled || !roomId) return
 
-    const socketUrl = url || ENV_CONFIG.WS_URL
+    // 检测是否在 HTTPS 环境
+    const isHttps = typeof window !== 'undefined' && window.location.protocol === 'https:'
 
-    console.log('[WS] Connecting to:', socketUrl, 'Room:', roomId)
+    // HTTPS 环境使用相对路径（走代理），强制使用轮询模式
+    // HTTP 环境直接连接后端，优先使用 WebSocket
+    const socketUrl = isHttps ? '' : (url || ENV_CONFIG.WS_URL)
+    const transports: ('websocket' | 'polling')[] = isHttps ? ['polling'] : ['websocket', 'polling']
+
+    console.log('[WS] Connecting to:', socketUrl || '(relative path)', 'Room:', roomId, 'Transports:', transports)
 
     socketRef.current = io(socketUrl, {
-      transports: ['websocket', 'polling'],
+      transports,
       reconnection: true,
       reconnectionDelay: 1000,
       reconnectionAttempts: 5,
+      // HTTPS 环境下的额外配置
+      ...(isHttps && {
+        path: '/socket.io',
+        withCredentials: false,
+      }),
     })
 
     const socket = socketRef.current