@quicktvui/web-cli 2.2.0 → 2.4.0

package/templates/dev-renderer.html

@@ -292,6 +292,124 @@
     // 页面加载后的冷却期：这段时间内忽略 bundle-update 事件
     // 防止 SSE 重连后收到缓存的旧 bundle-update 导致无限刷新
     var sseCooldownUntil = Date.now() + 3000; // 3 秒冷却期
+
+    // ========== CORS 代理 ==========
+    // 在 web-cli dev 模式下，拦截所有跨域 fetch/XHR/Image 请求，
+    // 转换为 /proxy/ 路径由 DevServer 代理转发，解决浏览器 CORS 限制
+    // TV 原生环境无 CORS 限制，但浏览器中所有外部请求都会被拦截
+    (function initDevProxy() {
+      var LOCAL_ORIGIN = window.location.origin;
+
+      /**
+       * 判断 URL 是否为跨域请求（需要代理）
+       * 排除 data:, blob:, javascript:, about: 等非 HTTP 协议 URL
+       */
+      function isCrossOrigin(url) {
+        if (!url || typeof url !== 'string') return false;
+        // 非网络协议的 URL 不需要代理
+        if (/^(data|blob|javascript|about):/i.test(url)) return false;
+        try {
+          var urlObj = new URL(url, window.location.href);
+          // 非 http/https 协议也不代理
+          if (urlObj.protocol !== 'http:' && urlObj.protocol !== 'https:') return false;
+          return urlObj.origin !== LOCAL_ORIGIN;
+        } catch (e) {
+          return false;
+        }
+      }
+
+      /**
+       * 将跨域 URL 转换为代理路径
+       * https://api.example.com/v1/data?a=1 → /proxy/https/api.example.com/v1/data?a=1
+       */
+      function toProxyUrl(url) {
+        try {
+          var urlObj = new URL(url, window.location.href);
+          // 只代理 http/https 协议
+          if (urlObj.protocol !== 'http:' && urlObj.protocol !== 'https:') return url;
+          var proxyPath = '/proxy/' + urlObj.protocol.replace(':', '') + '/' + urlObj.host + urlObj.pathname + urlObj.search + urlObj.hash;
+          return proxyPath;
+        } catch (e) {
+          return url;
+        }
+      }
+
+      // ===== 38989 debug server URL 转换 =====
+      // es3-vue 在非生产环境下会将 assets/xxx 转换为 http://127.0.0.1:38989/assets/xxx
+      // 但在 web 环境下这些资源就在 dist/dev/assets/ 中，应转为相对路径
+      var DEBUG_SERVER_RE = /https?:\/\/[^/:]+:38989\//;
+      function convertDebugServerUrl(url) {
+        if (typeof url === 'string' && DEBUG_SERVER_RE.test(url)) {
+          var converted = url.replace(DEBUG_SERVER_RE, './');
+          console.log('[DevProxy] 38989 URL converted:', url, '->', converted);
+          return converted;
+        }
+        return null;
+      }
+
+      // ===== 拦截 fetch =====
+      var originalFetch = window.fetch;
+      window.fetch = function(input, init) {
+        var url = (typeof input === 'string') ? input : (input && input.url ? input.url : input);
+        // 优先处理 38989 debug server URL → 相对路径
+        var debugConverted = convertDebugServerUrl(url);
+        if (debugConverted) {
+          if (typeof input === 'string') {
+            input = debugConverted;
+          } else if (input instanceof Request) {
+            input = new Request(debugConverted, init || {});
+          }
+        } else if (isCrossOrigin(url)) {
+          var proxyUrl = toProxyUrl(url);
+          console.log('[DevProxy] fetch:', url, '->', proxyUrl);
+          if (typeof input === 'string') {
+            input = proxyUrl;
+          } else if (input instanceof Request) {
+            input = new Request(proxyUrl, init || {});
+          }
+        }
+        return originalFetch.call(this, input, init);
+      };
+
+      // ===== 拦截 XMLHttpRequest =====
+      var originalXHROpen = XMLHttpRequest.prototype.open;
+      XMLHttpRequest.prototype.open = function(method, url, async, user, password) {
+        // 优先处理 38989 debug server URL → 相对路径
+        var debugConverted = convertDebugServerUrl(url);
+        if (debugConverted) {
+          url = debugConverted;
+        } else if (isCrossOrigin(url)) {
+          var proxyUrl = toProxyUrl(url);
+          console.log('[DevProxy] XHR:', url, '->', proxyUrl);
+          url = proxyUrl;
+        }
+        return originalXHROpen.call(this, method, url, async !== false, user, password);
+      };
+
+      // ===== 拦截 Image src =====
+      var originalImageSrcDescriptor = Object.getOwnPropertyDescriptor(HTMLImageElement.prototype, 'src');
+      if (originalImageSrcDescriptor && originalImageSrcDescriptor.set) {
+        Object.defineProperty(HTMLImageElement.prototype, 'src', {
+          ...originalImageSrcDescriptor,
+          set(value) {
+            // 优先处理 38989 debug server URL → 相对路径
+            var debugConverted = convertDebugServerUrl(value);
+            if (debugConverted) {
+              return originalImageSrcDescriptor.set.call(this, debugConverted);
+            }
+            if (isCrossOrigin(value)) {
+              var proxyUrl = toProxyUrl(value);
+              console.log('[DevProxy] Image:', value, '->', proxyUrl);
+              return originalImageSrcDescriptor.set.call(this, proxyUrl);
+            }
+            return originalImageSrcDescriptor.set.call(this, value);
+          }
+        });
+      }
+
+      console.log('[DevProxy] CORS proxy initialized - all cross-origin requests will be proxied');
+    })();
+
     if (window.__BUNDLE_CONFIG__ && window.__BUNDLE_CONFIG__.watch) {
       try {
         var sse = new EventSource(window.__BUNDLE_CONFIG__.sseEndpoint);