Reactjs 如何在react应用程序中访问浏览器cookie

这个问题有点流行，但我运气不好。我主要是一个后台人员，所以我会边学习边学习

我有一个名为

connect.sid

的cookie，其值为

12345

。我在chrome开发工具中看到了这一点

在我的react应用程序中，我的控制台记录了

document.cookie

和

localStorage.getItem（'connect.sid'）

。我得到的是空值。如何获取

12345

的值

，创建了此cookie。我需要访问它，这样我就可以与我的API交谈

---

谢谢您可以从

npm安装react cookie开始
然后
从'react cookie'
导入{cookie}，最后
Cookies.get（'connect.sid'）
：

别忘了在
CookiesProvider
中包装您的根应用程序，如下所示：

  <CookiesProvider>
    <App />
  </CookiesProvider>


我知道答案并不完全是你想要的，但是
如果您只是想授权服务器端的某个人，我有一个简单的解决方案。加上

凭据：“相同来源”

根据您的AJAX请求。如果您已经这样做，cookie将与connect.sid一起发送到服务器，服务器将为您处理身份验证
 使用
react cookie
可能是获取cookie值的最简单方法。您可以运行
npm install react cookie
，v2将被安装。如果您只想在客户端上使用简单的API，我建议您使用v1。只需运行
npm安装-cookie@1.0.5
，将
导入cookie从'react cookie'
添加到您的文件中，并使用
cookie.load（'connect.sid'）
获取cookie值。您可以查看v1的详细信息

如果仍然无法获取cookie值，请确认：

如果希望cookie在所有页面上都可访问，则cookie将设置为正确的路径，如
/
cookie不是，HttpOnly cookie不能通过JavaScript访问
使用react cookie v2的完整示例

您需要使用cookies（..）将根组件以及要访问cookies的各个组件包装到中。饼干是道具的一部分

client.js：

import {CookiesProvider} from "react-cookie";

<CookiesProvider>
  <App />
</CookiesProvider>

从“react cookie”导入{CookiesProvider}；

App.js：

import React from "react";
import {withCookies} from 'react-cookie';

class App extends React.Component {
  render() {
    const {cookies} = this.props;
    return <p>{cookies.get('mycookie')}</p>
  }
}

export default withCookies(App);

从“React”导入React；
从“react cookie”导入{WithCookie}；
类应用程序扩展了React.Component{
render（）{
const{cookies}=this.props；
return{cookies.get（'mycokie'）}

}
}
导出默认cookies（应用程序）；
使用react cookie通过使用document.cookie获取cookie不确定我是否遵循。Im getting
TypeError:_reactCookie.Cookies.get不是一个函数
I安装了v2并获得了
TypeError:无法读取未定义的属性“load”
很有趣，我可以设置并加载我设置的内容，但无法加载passport设置的内容：
connect.sid
谢谢你的提示
express会话
将其设置为
httpOnly
，因此我使用
cookie:{httpOnly:false}禁用了它
是的，它们已更改。我个人喜欢上一个版本，它很简单。现在你必须使用包装CookiesProvider和withCookie。目的是使用axios将cookie作为标题发送到我的服务器，因为这就是我知道用户是谁的方式。你只需通过谷歌搜索如何使用axios设置凭据“同源”，一切都会为你处理。如果设置该参数，cookie将以connect.sid=12345发送。之后，passport.session（）方法将把cookie数据转换为req.user数据。您不必自己处理身份验证。passport会处理的。我会在搜索后给你回复。谢谢