在React中访问标头值

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在React中访问标头值相关的知识,希望对你有一定的参考价值。

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

解决方法是创建另一个proxyReact with Express

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

工作流程变成localhost:4000将处理AA。结果转发给localhost:5000localhost: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的团队交谈并询问他们的想法是什么。

以上是关于在React中访问标头值的主要内容,如果未能解决你的问题,请参考以下文章

使用 react 设置 axios 标头

如何使用 HttpClient 在 Web api 中传递标头值

访问被 CORS 标头阻止

如何在 Blazor WASM 客户端中访问 Httpclient 标头

使用 Rails 和 React 时如何在标头中获取 JWT 令牌

使用React Native中的Fetch授权标头