如何调试托管在使用 servlet 过滤器保护的 WebServer 上的 React Web App
How to debug React Web App hosted on WebServer secured with servlet filter
我正在开发一个带有 ReactJS 前端和 Java 后端的应用程序。构建过程涉及将 JSX 转换为 bundle.js 文件，然后将其复制到后端项目中，然后将其打包为 WAR 并部署到 Tomcat 服务器。
正常的工作流程涉及一个 javax.servlet.Filter，它会拦截对服务器的所有 http 请求，以查看用户是否已通过身份验证。如果不是，它将重定向到 OAuth 服务器以进行身份验证。然后将身份验证的响应存储在 http 会话中，并由过滤器使用以允许进一步的请求通过。
因此，当 Java 脚本代码执行时，我不必担心用户是否登录。我只是调用休息端点 /api/getCurrentUser 从托管 bundle.js 的同一服务器获取用户详细信息。一切都在生产中完美运行！
我的问题是我想在不重新部署整个应用程序的情况下调试、更改和测试 ReactJS 代码。部署大约需要 3 分钟，对于我更改的每一行代码，这个过程都太痛苦了。
在实现 Auth Filter 之前，我使用 Webpack 的 Dev Server 来托管、调试和热重载 React 代码。所有 /api 请求都转发到我本地计算机上的服务器实例 运行。现在这是不可能的，因为当我执行 api 调用时，后端没有经过身份验证的用户，过滤器将调用重定向到 OAuth 服务器。一切都从这里消失了。
我知道这是一个 Frankenstein 架构，它不是您通常会看到的东西，但我完全不知道如何让我的调试环境再次工作。我需要以某种方式在后端对用户进行身份验证，并使用该会话从 Dev Server 发出 api 请求。有人有什么想法吗？
有意思。所以感觉就像您的 Web 后端实现了 OAuth 流程并发出了 auth cookie - 是这样吗？
然后它还会创建会话数据并重新部署 Web 静态内容会重置应用程序并清除会话？
或者是您必须使用已部署的重定向 URI 的问题？能不能只在Authorization Server配置2个值，在本地开发时使用第二个选项？
- 已部署url：https://myserver/myapp
- 本地 url：http://localhost:3000/myapp
首选架构
当人们使用服务器端网络应用程序时，我经常看到可以避免的复杂性——这是一个过时的概念，导致的问题多于解决的问题。看我的 SPA Goals 写的。
是否可以做SPA安全客户端？在性能和可用性方面可能会有很大的好处，您的利益相关者可能会感兴趣。
我的目标是提供 2 个这样的组件 - 这样您的 React 设置将完全标准且高效：
- Java Web API（通过 OAuth 2.0 访问令牌保护）
- React SPA（使用授权代码流 + PKCE）
出于兴趣我的 Java API + React SPA sample has exactly this setup, or you can run my online demo React app。
如果我有误解，请告诉我 - 很乐意讨论后续问题。
所以我自己找到了解决办法。我要去 post 在这里，以防其他人遇到这个问题。
@gary-archer 正确提示：
Or is the problem that you have to use the deployed redirect URI?
我必须使用部署在 OAuth 服务器上的重定向 URI（又名 /callback）。该 URI 最初指向后端服务器（如初始图中所示）。所以我必须让它指向我的 Webpack Dev Server 实例，后者又会将 /callback 请求转发到后端服务器。这样，后端就可以正确初始化 HTTP 会话数据，Webpack 开发服务器可以在响应中获取 JSESSIONID Cookie。
为了启动我的环境，我访问的是 http://webpack-url:webpack-port/login，它也被转发到后端服务器。它又重定向到 OAuth 服务器进行登录。我本可以直接从前端调用 OAuth 服务器登录，但这意味着要重新实现后端的逻辑。
我正在开发一个带有 ReactJS 前端和 Java 后端的应用程序。构建过程涉及将 JSX 转换为 bundle.js 文件，然后将其复制到后端项目中，然后将其打包为 WAR 并部署到 Tomcat 服务器。
正常的工作流程涉及一个 javax.servlet.Filter，它会拦截对服务器的所有 http 请求，以查看用户是否已通过身份验证。如果不是，它将重定向到 OAuth 服务器以进行身份验证。然后将身份验证的响应存储在 http 会话中，并由过滤器使用以允许进一步的请求通过。
因此，当 Java 脚本代码执行时，我不必担心用户是否登录。我只是调用休息端点 /api/getCurrentUser 从托管 bundle.js 的同一服务器获取用户详细信息。一切都在生产中完美运行！
我的问题是我想在不重新部署整个应用程序的情况下调试、更改和测试 ReactJS 代码。部署大约需要 3 分钟，对于我更改的每一行代码，这个过程都太痛苦了。
在实现 Auth Filter 之前，我使用 Webpack 的 Dev Server 来托管、调试和热重载 React 代码。所有 /api 请求都转发到我本地计算机上的服务器实例 运行。现在这是不可能的，因为当我执行 api 调用时，后端没有经过身份验证的用户，过滤器将调用重定向到 OAuth 服务器。一切都从这里消失了。
我知道这是一个 Frankenstein 架构，它不是您通常会看到的东西，但我完全不知道如何让我的调试环境再次工作。我需要以某种方式在后端对用户进行身份验证，并使用该会话从 Dev Server 发出 api 请求。有人有什么想法吗？
有意思。所以感觉就像您的 Web 后端实现了 OAuth 流程并发出了 auth cookie - 是这样吗？
然后它还会创建会话数据并重新部署 Web 静态内容会重置应用程序并清除会话？
或者是您必须使用已部署的重定向 URI 的问题？能不能只在Authorization Server配置2个值，在本地开发时使用第二个选项？
- 已部署url：https://myserver/myapp
- 本地 url：http://localhost:3000/myapp
首选架构
当人们使用服务器端网络应用程序时，我经常看到可以避免的复杂性——这是一个过时的概念，导致的问题多于解决的问题。看我的 SPA Goals 写的。
是否可以做SPA安全客户端？在性能和可用性方面可能会有很大的好处，您的利益相关者可能会感兴趣。
我的目标是提供 2 个这样的组件 - 这样您的 React 设置将完全标准且高效：
- Java Web API（通过 OAuth 2.0 访问令牌保护）
- React SPA（使用授权代码流 + PKCE）
出于兴趣我的 Java API + React SPA sample has exactly this setup, or you can run my online demo React app。
如果我有误解，请告诉我 - 很乐意讨论后续问题。
所以我自己找到了解决办法。我要去 post 在这里，以防其他人遇到这个问题。
@gary-archer 正确提示：
Or is the problem that you have to use the deployed redirect URI?
我必须使用部署在 OAuth 服务器上的重定向 URI（又名 /callback）。该 URI 最初指向后端服务器（如初始图中所示）。所以我必须让它指向我的 Webpack Dev Server 实例，后者又会将 /callback 请求转发到后端服务器。这样，后端就可以正确初始化 HTTP 会话数据，Webpack 开发服务器可以在响应中获取 JSESSIONID Cookie。
为了启动我的环境，我访问的是 http://webpack-url:webpack-port/login，它也被转发到后端服务器。它又重定向到 OAuth 服务器进行登录。我本可以直接从前端调用 OAuth 服务器登录，但这意味着要重新实现后端的逻辑。