在 React 中访问 Header 值

Question

我是 React 新手，我相信这是一种独特的情况。

所以，我正在创建一个React 网站create-react-app。当我运行npm start 时，它将在localhost:3000 上运行。

我的下一个要求是拥有Authentication & Authorization (AA)。它已经由另一个组创建。

他们给我的是一个小型代理网站。假设它在localhost:4000 上运行。

当我想去localhost:3000/Home时，我会输入localhost:4000/Home。

localhost:4000 会处理AA，如果一切顺利，它会转发给localhost:3000/Home。

登录信息由localhost:4000 添加到Http-Only & Secure cookie。

我的问题是React 如何访问它？

其中一个解决方案是使用react-cookie。但它无法访问Http-Only & Secure cookie。

解决方法是创建另一个proxy。 React with Express

所以，我在 localhost:5000 创建了另一个代理。

工作流变为localhost:4000 将处理AA。结果被转发到localhost:5000。 localhost:5000 将决定是转发到 localhost:3000 还是重定向到 error 页面。如果我的原始网站不需要使用这些结果 cookie，它就可以工作。

但是React 网站需要对localhost:9000 的单独网站进行一些POST 调用。 React 需要将相同的 AA 结果 cookie 传递给该网站。如果没有，它将要求用户再次登录。

我无法将 cookie 属性更改为非 Http-Only，或将它们复制到其他位置。

那么，问题是如何将这些 cookie 传递给localhost:9000？

我是不是走错了路，因为我在网上找不到任何类似的帖子。

简而言之，React 可以访问设置了 username 之类的信息的标头，以及存储实际令牌的cookies 吗？如果没有，标准的解决方法是什么？

非常感谢。

Answer 1

试图绕过仅 HTTP 授权 cookie 存在巨大的安全风险，因为在这种情况下它们可能会被第三方脚本窃取。使用代理绕过这个限制肯定是一个不合适的解决方案。

您正在使用共享一个身份验证系统的多个服务（localhost 3000、4000、9000）的环境中工作。在这种情况下，您的选择是：

1) 让您的服务器（3000 台）代表客户端与其他服务器通信。如果您的客户端需要 POST 到 9000，让它 POST 到一个特殊的端点 3000。然后您的服务器将查询 9000 并返回给客户端并返回答案。

在这种情况下，您需要建立服务器-服务器身份验证，这比客户端-服务器简单得多。但是您必须单独处理授权 - 如果您的客户可能拥有不同的权限。

2) 如果 4000 服务器只是 AAA 的来源，则将其设为 单点登录 服务器。这种类型的解决方案有很多。随着微服务的出现，OAuth2 和 JSON Web 令牌 (JWT) 成为当今的热门话题。

您也可以与开发localhost:4000 的团队交谈，询问他们的想法。