在React中访问标头值

Posted 2021-05-06

我是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。

登录信息由Http-Only & Secure添加到localhost:4000 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网站需要做一些POST电话到localhost:9000的单独网站。 React需要将相同的AA结果cookie传递给该网站。如果没有，它将要求用户再次登录。

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

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

我在完全错误的轨道上，因为我在网上找不到任何类似的帖子。

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

非常感谢。

答案

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

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

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

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

2）如果4000服务器只是AAA的源，那么使其成为单点登录服务器。有很多这种类型的解决方案。随着微服务的出现，OAuth2和JSON网络令牌（JWT）是当今的热门话题。

您还可以与开发localhost:4000的团队交谈并询问他们的想法是什么。