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，并嵌套您的小脚本文件，该文件会自动生成种族主义评论...或coinbase.com，并在您碰巧发生时触发比特币的转移是一个coinbase用户并当前已通过身份验证。等

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

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

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

1 个答案: