1

我正在使用单水疗角框架的微前端方法工作。我有一个根容器应用程序,它在 4200 端口和 2 个微应用程序说 app1 @5201 和 app2 @ 4201 端口运行。我没有遇到 app2 的任何问题,它按照微前端方法完美运行。

在 app1 中,我有一个登录组件和仪表板组件。所以当我点击app1时,它首先点击登录组件(所需的流程:它必须检查用户配置文件并进行身份验证,并根据结果导航到仪表板组件)。为了在 app1 中检查此用户配置文件,我正在使用应用程序服务器(运行 @8443 端口)运行后端服务,并且代理在代理 config.json 中配置如下:{“/app1/*”:{“目标”:“http ://localhost:8443/", "secure": false } } 并且在 app1 中的 npm start 期间,它会从包 .json 中获取此语句(--proxy-config proxy.conf.json),这就是我们配置代理的方式用于 app1 中的后端服务。

现在,来到微前端,当我从根容器点击 app1 时,我得到一个拒绝访问的图像而不是仪表板。在内部,它点击了 app1 的登录组件,当我看到网络选项卡时,它点击了状态为 200k 的用户配置文件方法,但响应是整个 html(无论我在根容器的 index.html 中给出了什么)和访问被拒绝的图像被调用和渲染。它没有击中后端服务器本身。

但是当我点击 http://localhost:5201/app1/app1/app1-user-profile 时,我可以在浏览器中看到所需的响应。所以当我从其他应用程序路由时,是什么阻止我获取 app1 的仪表板/4200 端口?

谁能在这方面指导我?我是否还需要在根容器和其他微应用中配置代理设置?single-spa 可以帮助我进行此代理配置吗?

4

1 回答 1

0

我有同样的问题,我的解决方案是在根应用程序中配置代理,在我的情况下,它是一个 webpack 开发配置。

这是因为所有未在“子应用”的路由组件中明确定义的路由都被根应用程序重定向。

这是我的带有代理的 webpack 配置,例如 https://github.com/milobella/application-web/blob/master/portal/webpack.dev.js

于 2020-08-21T09:27:04.410 回答