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

Question

我想从一个 React 应用程序请求另一个 React 应用程序，然后将其加载到新选项卡中。该请求包含授权标头，因此该要求阻止我使用常规静态链接或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（跨站点脚本攻击）之类的事情。

否则，理论上你可以做一些事情，比如让用户的浏览器在新选项卡中加载 facebook.com，嵌套你的小脚本文件，自动生成种族主义 cmets...或 coinbase.com，如果你碰巧触发比特币转移成为 coinbase 用户并且当前已通过身份验证。等等

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

返回值 一个 WindowProxy 对象，它基本上是代表新创建的窗口的 Window 对象的一个​​瘦包装器，并且具有所有可用的功能。如果无法打开窗口，则返回值为 null。返回的引用可用于访问新窗口的属性和方法，只要符合同源策略安全要求即可。