如何在指定视图路径下托管另一个独立React应用

优先选择：反向代理路由 + OAuth2 SSO（维护成本最低） #

这个方案完全不需要修改两个应用的构建逻辑，是目前最简洁的落地方式：

• 开发环境：在CRA的package.json里加proxy配置，把/forum前缀的请求转发到localhost:port2，示例配置："proxy": "http://localhost:port2"，如果要更精细化的路由规则，用http-proxy-middleware写中间件即可
• 生产环境：用Nginx配置location规则，匹配^/forum的请求全部转发到NodeBB的服务地址，两个应用独立部署、独立升级，互不干扰
• 实现效果完全匹配需求，用户访问localhost:port/forum即为论坛服务，感知不到背后的端口转发逻辑

安全说明 #

• 反向代理只会转发你指定前缀的请求，不会暴露NodeBB的其他服务接口，只要做好路径匹配规则就不会有路径遍历风险
• 两个应用通过代理实现同域，OAuth2的token可以存在带HttpOnly、Secure属性的Cookie里，自动在同域请求中携带，不需要手动在前端传递用户凭证，避免XSS攻击导致的凭证泄露

次选：微前端方案（仅需要深度UI集成时使用） #

如果需要在主应用的公共布局（比如顶部导航、用户中心）里嵌入论坛的部分模块，再考虑用SingleSPA或者Module Federation方案：

• 优势：可以实现跨应用的组件复用、UI层深度整合
• 注意事项：需要两个应用都修改构建配置适配微前端生命周期，后续NodeBB版本升级如果调整了构建逻辑或全局变量，需要同步修改适配规则，维护成本远高于反向代理方案
• 安全要求：跨应用通信禁止传递明文用户凭证，所有身份校验仍然走同域Cookie自动携带的OAuth2 token，不要通过微前端的全局事件总线传递敏感信息

不推荐的方案 #

直接用webpack/parcel把NodeBB打包进主应用的方案完全不建议使用：

• NodeBB是独立的全栈应用，不是可复用组件库，打包嵌入需要大量修改NodeBB的源码和构建逻辑
• 后续NodeBB版本升级、安全补丁更新都需要重新适配主应用的构建规则，维护成本极高，还容易出现依赖冲突

内容的提问来源于stack exchange，提问作者Jeffrey Wardman