@quicktvui/web-cli 2.2.0 → 2.4.0

package/lib/DevServer.js

@@ -369,7 +369,13 @@ class DevServer {
 
     // dist/dev/ 下的文件 - 映射到项目的 dist/dev 目录
     if (pathname.startsWith('/dist/dev/')) {
-      const relativePath = pathname.replace('/dist/dev/', '')
+      let relativePath = pathname.replace('/dist/dev/', '')
+      // 剥离 bundles-dev 中间段：web-runtime 的 publicPath 包含 bundles-dev，
+      // 导致 webpack 管理的资源（如图片）URL 会变成 /dist/dev/bundles-dev/assets/xxx.png
+      // 但实际文件在 dist/dev/assets/xxx.png，bundles-dev 只是 Hippy debug server 的路径约定
+      if (relativePath.startsWith('bundles-dev/')) {
+        relativePath = relativePath.replace('bundles-dev/', '')
+      }
       const filePath = path.join(this.distDir, relativePath)
       this._serveStaticFile(res, filePath, this.distDir)
       return
@@ -494,42 +500,97 @@ class DevServer {
 
   /**
    * 处理代理请求
+   *
+   * URL 格式: /proxy/{http|https}/{host}[:port]/{path}[?query]
+   * 示例:
+   *   /proxy/https/api.example.com/v1/data → https://api.example.com/v1/data
+   *   /proxy/https/api.example.com:8443/v1/data → https://api.example.com:8443/v1/data
    */
   _handleProxy(req, res, pathname) {
-    // /proxy/https/example.com/path → https://example.com/path
+    // 从完整 URL 中提取查询参数（pathname 只有路径部分）
+    const fullUrl = url.parse(req.url, true)
+    const queryString = fullUrl.search || ''
+
     const match = pathname.match(/^\/proxy\/(https?)\/([^/]+)(\/.*)?$/)
     if (!match) {
       res.writeHead(400, { 'Content-Type': 'text/plain' })
-      res.end('Invalid proxy URL format. Use: /proxy/{http|https}/{host}/{path}')
+      res.end('Invalid proxy URL format. Use: /proxy/{http|https}/{host}[:port]/{path}')
       return
     }
 
     const protocol = match[1]
-    const host = match[2]
-    const proxyPath = match[3] || '/'
+    const hostPort = match[2]
+    const proxyPath = (match[3] || '/') + queryString
+
+    // 分离 host 和 port
+    let hostname = hostPort
+    let port = protocol === 'https' ? 443 : 80
+    if (hostPort.includes(':')) {
+      const parts = hostPort.split(':')
+      hostname = parts[0]
+      port = parseInt(parts[1], 10) || port
+    }
+
+    // 过滤掉 hop-by-hop 头，避免转发问题
+    const headers = { ...req.headers }
+    delete headers['host']
+    delete headers['connection']
+    delete headers['keep-alive']
+    delete headers['transfer-encoding']
+    delete headers['te']
+    delete headers['trailer']
+    delete headers['upgrade']
+    delete headers['proxy-connection']
+    headers['host'] = hostPort
+    // 标记请求来自代理（方便调试）
+    headers['x-forwarded-for'] = req.socket.remoteAddress
+    headers['x-forwarded-proto'] = protocol
 
     const options = {
-      hostname: host,
-      port: protocol === 'https' ? 443 : 80,
+      hostname,
+      port,
       path: proxyPath,
       method: req.method,
-      headers: {
-        ...req.headers,
-        host: host,
-      },
+      headers,
+      rejectUnauthorized: false, // 允许自签名证书
     }
 
     const httpModule = protocol === 'https' ? require('https') : require('http')
     const proxyReq = httpModule.request(options, (proxyRes) => {
-      res.writeHead(proxyRes.statusCode, proxyRes.headers)
+      // 代理响应添加 CORS 头
+      const responseHeaders = { ...proxyRes.headers }
+      responseHeaders['access-control-allow-origin'] = this.corsOrigin
+      responseHeaders['access-control-allow-methods'] = 'GET, POST, PUT, DELETE, OPTIONS, PATCH'
+      responseHeaders['access-control-allow-headers'] = '*'
+      responseHeaders['access-control-allow-credentials'] = 'true'
+      // 移除可能导致问题的安全头
+      delete responseHeaders['x-frame-options']
+      delete responseHeaders['content-security-policy']
+
+      res.writeHead(proxyRes.statusCode, responseHeaders)
       proxyRes.pipe(res)
     })
 
     proxyReq.on('error', (err) => {
-      res.writeHead(502, { 'Content-Type': 'text/plain' })
-      res.end(`Proxy error: ${err.message}`)
+      console.error(
+        `[Proxy] Error: ${err.message} -> ${protocol}://${hostname}:${port}${proxyPath}`
+      )
+      if (!res.headersSent) {
+        res.writeHead(502, {
+          'Content-Type': 'application/json',
+          'Access-Control-Allow-Origin': this.corsOrigin,
+        })
+      }
+      res.end(
+        JSON.stringify({
+          error: 'Proxy error',
+          message: err.message,
+          target: `${protocol}://${hostname}:${port}${proxyPath}`,
+        })
+      )
     })
 
+    // 转发请求体（POST/PUT 等）
     req.pipe(proxyReq)
   }
 
@@ -538,8 +599,9 @@ class DevServer {
    */
   _setCORSHeaders(res) {
     res.setHeader('Access-Control-Allow-Origin', this.corsOrigin)
-    res.setHeader('Access-Control-Allow-Methods', 'GET, OPTIONS')
-    res.setHeader('Access-Control-Allow-Headers', 'Content-Type')
+    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS, PATCH')
+    res.setHeader('Access-Control-Allow-Headers', '*')
+    res.setHeader('Access-Control-Allow-Credentials', 'true')
   }
 
   /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quicktvui/web-cli",
-  "version": "2.2.0",
+  "version": "2.4.0",
   "description": "CLI tool for QuickTVUI web development v2 - delegate build & bundle loading",
   "author": "QuickTVUI Team",
   "license": "Apache-2.0",