@quicktvui/web-cli 2.2.0 → 2.3.0

package/templates/dev-renderer.html

@@ -292,6 +292,87 @@
     // 页面加载后的冷却期：这段时间内忽略 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 是否为跨域请求（需要代理）
+       */
+      function isCrossOrigin(url) {
+        if (!url) return false;
+        try {
+          var urlObj = new URL(url, window.location.href);
+          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);
+          var proxyPath = '/proxy/' + urlObj.protocol.replace(':', '') + '/' + urlObj.host + urlObj.pathname + urlObj.search + urlObj.hash;
+          return proxyPath;
+        } catch (e) {
+          return url;
+        }
+      }
+
+      // ===== 拦截 fetch =====
+      var originalFetch = window.fetch;
+      window.fetch = function(input, init) {
+        var url = (typeof input === 'string') ? input : (input && input.url ? input.url : input);
+        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) {
+        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) {
+            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);