如何调试托管在使用 servlet 过滤器保护的 WebServer 上的 React Web App

Question

我正在开发一个带有 ReactJS 前端和 Java 后端的应用程序。构建过程包括将 JSX 转换为 bundle.js 文件，然后将其复制到后端项目中，然后将其打包为 WAR 并部署到 Tomcat 服务器。

正常的工作流程涉及到一个javax.servlet.Filter，它拦截所有对服务器的http请求，以查看用户是否经过身份验证。如果不是，它会重定向到 OAuth 服务器进行身份验证。然后将身份验证的响应存储在 http 会话中，并由过滤器使用以允许进一步的请求通过。

所以当 Javascript 代码被执行时，我不必担心用户是否登录。我只是调用一个休息端点/api/getCurrentUser 来从托管bundle.js 的同一服务器获取用户详细信息。一切都在生产中完美运行！

我的问题是我想在不重新部署整个应用程序的情况下调试、更改和测试 ReactJS 代码。部署大约需要 3 分钟，对于我更改的每一行代码来说，这个过程太痛苦了。

在实现 Auth Filter 之前，我使用 Webpack 的 Dev Server 来托管、调试和热重载 React 代码。所有/api 请求都被转发到在我的本地机器上运行的服务器实例。现在这是不可能的，因为当我执行 api 调用时，后端没有用户经过身份验证，过滤器将调用重定向到 OAuth 服务器。一切都从这里消失了。

我知道这是一个架构的科学怪人，这不是你通常会看到的东西，但我完全不知道如何让我的调试环境再次工作。我不知何故需要在后端对用户进行身份验证，并使用该会话从 Dev Server 发出 api 请求。有人有什么想法吗？

Answer 1

有趣。所以感觉就像您的 Web 后端实现了 OAuth 流程并发出了一个 auth cookie - 对吗？

然后它还会创建会话数据并重新部署网络静态内容会重置应用程序并清除会话？

或者是您必须使用已部署的重定向 URI 的问题？可以在授权服务器中配置2个值，本地开发时使用第二个选项吗？

• 部署的网址：https://myserver/myapp
• 本地网址：http://localhost:3000/myapp

首选架构

当人们使用服务器端 Web 应用程序时，我经常看到可以避免的复杂性——这是一个过时的概念，导致的问题比它解决的问题多。请参阅我的 SPA Goals 写的。

是否可以做 SPA 安全客户端？在性能和可用性方面可能有很大的好处，您的利益相关者可能会感兴趣。

我的目标是提供 2 个这样的组件 - 你的 React 设置将完全标准且高效：

• Java Web API（通过 OAuth 2.0 访问令牌保护）
• React SPA（使用授权码流 + PKCE）

出于兴趣，我的Java API + React SPA sample 正好有这个设置，或者你可以运行我的online demo React app。

如果我有误解，请告诉我 - 很乐意讨论后续问题。

Answer 2

所以我自己找到了解决方案。我要在这里发帖，以防其他人遇到这个问题。

@gary-archer 正确提示：

或者是您必须使用已部署的重定向 URI 的问题？

我必须使用部署在 OAuth 服务器上的重定向 URI（又名/callback）。该 URI 最初指向后端服务器（如初始图中所示）。所以我必须让它指向我的 Webpack Dev Server 实例，然后它将/callback 请求转发到后端服务器。这样，HTTP 会话数据被后端正确初始化，Webpack 开发服务器在响应中获取 JSESSIONID Cookie。

为了启动我的环境，我访问的是http://webpack-url:webpack-port/login，它也被转发到后端服务器。它反过来重定向到 OAuth 服务器进行登录。我本可以直接从前端调用 OAuth 服务器登录，但这意味着要重新实现后端的逻辑。