fix: Ensure that bundle URL origin matches debugger page origin (#403)

This structurally sets up the Chrome debugger not to have CORS issues if the bundle URL domain differs from the Chrome debugger page domain. This bug was initially fixed in facebook/react-native#17720 and regressed in #194. This commit fixes the original bug without changing the behavior introduced in #194.

This commit makes the debugger page use its own URL origin when loading the bundle URL. This addresses the case where the native client may have a bundle URL with a domain like xip.io. Fundamentally, unless the development server allows cross-origin requests, the bundle URL's domain must match the domain used by the Chrome debugger page, which is what this commit achieves.

Author: ide

packages/cli/src/commands/server/debugger-ui/index.html

@@ -219,7 +219,15 @@
   connectToDebuggerProxy();
 
   async function getBlobUrl(url) {
-    return await window.deltaUrlToBlobUrl(url.replace('.bundle', '.delta'));
+    // Ensure that the bundle URL has the same origin as this webpage so that
+    // the same-origin policy lets us fetch it
+    const urlObject = new URL(url, location);
+    const relativeUrl = urlObject.pathname.replace('.bundle', '.delta') +
+      urlObject.search +
+      urlObject.hash;
+    const localUrl = new URL(relativeUrl, location).toString();
+
+    return await window.deltaUrlToBlobUrl(localUrl);
   }
 })();
 </script>