Question

这个问题有点受欢迎，但我没有这样的运气。我主要是一个后端人员，所以我在学习的过程中一直在学习。

我有一个名为connect.sid且值为12345的Cookie。我在我的chrome dev工具中看到了这一点。

在我的反应应用中，我控制台记录了document.cookie和localStorage.getItem('connect.sid')。我得到空值。如何获得12345的价值？

Passportjs，using passport-github2 strategy创建了此Cookie。我需要访问它才能与我的API通信。

由于

Answer 1

使用react-cookie可能是获取Cookie值的最简单方法。您可以运行npm install react-cookie，将安装v2。如果您只想在客户端上使用简单的API，我建议使用v1。只需运行npm install react-cookie@1.0.5，将import cookie from 'react-cookie'添加到您的文件中，然后使用cookie.load('connect.sid')获取Cookie值。您可以查看v1的README了解详细信息。

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

如果您希望可以在所有网页上访问您的Cookie，则将Cookie设置为更正/之类的路径。
Cookie不是httpOnly cookie，HttpOnly Cookie无法通过JavaScript访问。

Answer 2

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

凭据：'同源'

到你的AJAX请求。如果您已经这样做，cookie将与您的connect.sid一起发送到服务器，服务器将为您处理身份验证。

Answer 3

使用react-cookie v2的完整示例。

您需要包装您的根组件，以及要在withCookies（..）中访问cookie的各个组件。饼干就是道具的一部分。

client.js：

import {CookiesProvider} from "react-cookie";

<CookiesProvider>
  <App />
</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);

Answer 4

您可以从npm install react-cookie开始，然后import { Cookies } from 'react-cookie'，最后是cookies.get('connect.sid')：

不要忘记将您的根应用程序包装在CookiesProvider内，如下所示：

  <CookiesProvider>
    <App />
  </CookiesProvider>

您可以找到一个示例 here

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

4 个答案: