如何解决如何使用 IFrame 在容器前端的 url 中包含微前端的 url？
在我的工作中，我被要求做一个系统，在该系统中我们可以连接到部署在我们的云服务 (Azure) 中的不同独立前端。这个独立的前端没有合适的域。我们只想使用单个域“例如：https://container.com”。对独立前端的访问将通过扩展 url 来实现。例如：
http://container.com/testapp1 向我展示了 testapp1。 ( https://testapp1.azurewebsites.net ) http://container.com/testapp2 向我展示了 testapp2。 ( https://testapp2.azurewebsites.net )
我的想法是创建一个简单的 express 服务器和一个 html 文件。 （server.js 和 main.html） 快递服务器显示以下 html 站点：
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta http-equiv="X-UA-Compatible" content="IE=edge">
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Container</title>
</head>
<style>
html {
width:100%;
height:100%;
}
body {
width:100%;
height:100%;
margin:0px;
}
iframe {
border:0px;
width:100%;
height:100%;
}
</style>
<body>
<iframe id="container-id"></iframe>
<script type="text/javascript">
const routes={
"/":"","/testapp1":"https://testapp1.azurewebsites.net","/testapp2":"https://testapp1.azurewebsites.net"
}
const container = document.querySelector("#container-id");
container.src = routes[window.location.pathname];
</script>
</body>
</html>
好得令人难以置信。这种方法的问题在于每个应用程序都有自己的 url 配置。 testapp1 和 testapp2 有 "/login","/projects","/projects/:id"，它的缺点是，每当我重新加载页面时，它都会将我直接重定向到 /login。我猜这是因为 testapp1 的 url 没有保存，默认情况下它直接带我到“/”。不过我想留在/projects/:id。
我一直在寻找其他选项（不一定非要使用 IFrame），但我还没有找到好的替代方法。
这就是为什么我问是否可以使用 IFrame 扩展 url？例如https://container.com/testapp1/login，然后转到/projects/:id。如果这是不可能的，还有其他原因要扩展 url 吗？
非常感谢您的时间！
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。