如何从另一个 React 应用打开一个 React 应用

Question

从 React 应用程序中，我想请求另一个 React 应用程序，然后将其加载到新选项卡中。 该请求包含授权 header，因此该要求阻止我使用常规 static 链接或window.open(link, '_blank'); ，我需要改用正确的请求。 我正在做的事情相当简单：

const handleClick = jwt => {
        fetch(url,
            {
                method: 'GET',
                headers: {
                    'Accept': 'text/html',
                    'Authorization': 'Bearer ' + jwt
                }
            })
            .then(response => response.text())
            .then(body => {
                const w = window.open("");
                w.document.open();
                w.document.write(body);
                w.document.close();
            });
    };

该代码打开一个新选项卡并注入 HTML。 然而，接下来发生的事情是加载的 index.html 加载了原始打开应用程序的 React 文件，而不是打开的应用程序，并且新选项卡中的结果只是原始应用程序。 索引包含的脚本标签对于两个应用程序都是相同的，至少在开发中：

<script src="/static/js/bundle.js"></script>
<script src="/static/js/1.chunk.js"></script>
<script src="/static/js/main.chunk.js"></script>
<script src="/main.4bf234700064bd70611e.hot-update.js"></script> //this line differs ofc, but it is not important for the purpose of the question

有没有办法强制从 localhost:8000 下载这些新文件，这是我要渲染的应用程序，而不是 localhost:4000，这是我的原始应用程序运行的地方？

Answer 1

我很确定这个问题的答案是否定的。 浏览器强制执行称为“同源策略”的东西，以防止您执行 XSS（跨站点脚本攻击）之类的事情。

否则，理论上你可以在一个新选项卡中使用嵌套的小脚本文件，自动生成种族主义评论......或 coinbase.Z4D236D9A2D102C5FE6AD1C50DA用户并且当前已通过身份验证。 等等

https://developer.mozilla.org/en-US/docs/Web/API/Window/open

返回值 A WindowProxy object，它基本上是 Window object 代表新创建的 Z05B8C74CBD902FFBF244 的所有可用功能。 如果无法打开 window，则返回值改为 null。 返回的引用可用于访问新 window 的属性和方法，只要它符合同源策略安全要求即可。