如何从另一个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文件，而不是打开的应用程序，新标签页中的结果只是原来的应用程序。至少在开发中，index所包含的脚本标签对两个应用是一样的。

<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，并嵌套你的小脚本文件，自动生成种族主义评论......或者coinbase.com，如果你碰巧是coinbase的用户并且当前已通过认证，则触发比特币的转移等等。

https:/developer.mozilla.orgen-USdocsWebAPIWindowopen。

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