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

Question

这个问题有点流行，但我没有这样的运气。我主要是后端人员，所以我边走边学。

我有一个名为 connect.sid 的 cookie 和 12345 的值。我在我的 chrome 开发工具中看到了这一点。

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

Passportjs 使用 passport-github2 策略 创建了这个 cookie。我需要访问它，以便与我的 API 交谈。

谢谢

原文由 Sylar 发布，翻译遵循 CC BY-SA 4.0 许可协议

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值，请确认：

1. cookie 设置为正确的路径，如 / ，如果您希望您的 cookie 可以在所有页面上访问。
2. cookie 不是 httpOnly cookie ，无法通过 JavaScript 访问 HttpOnly cookie。

原文由 tony.hokan 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

凭据：’同源’

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

原文由 NotGapsong 发布，翻译遵循 CC BY-SA 3.0 许可协议