【问题标题】：cookie value is undefined (react-cookie 2.0.6)cookie 值未定义（react-cookie 2.0.6）
【发布时间】：2017-10-09 02:11:22
【问题描述】：

我在实现 react cookie v^2 时遇到问题。我使用 webpack-dev-server 进行测试。
这是一个关闭日志：

警告：上下文类型失败：上下文cookies 在withCookies(App) 中标记为必需，但其值为undefined。
在 withCookies(App)
在提供者中

/App.jsx:

import React, { Component } from 'react';
import { CookiesProvider, withCookies, Cookies} from 'react-cookie'
import {Route, Switch, BrowserRouter} from 'react-router-dom';

//import RequireAuth from './RequireAuth';
import NotFoundPage from './NotFoundPage';
import LandingPage from './LandindPage';
import WorkSpace from './WorkSpace';
import ActivationPage from './ActivationPage';

class App extends Component {
  render() {
    return (
      <CookiesProvider>
        <BrowserRouter>
          <Switch>
            <Route exact={true} path="/" component={LandingPage}/>
            <Route path="/workspace" component={WorkSpace}/>
            <Route exact path="/activation" component={ActivationPage}/>
            <Route path="*" component={NotFoundPage}/>
          </Switch>
        </BrowserRouter>
      </CookiesProvider>
    );
  }
}

export default withCookies(App);

/index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware } from 'redux';
import reduxThunk from 'redux-thunk';
import reducers from './reducers';
import { Provider } from 'react-redux';

import App from './components/App';

const createStoreWithMiddleware = applyMiddleware(reduxThunk)(createStore);
const store = createStoreWithMiddleware(reducers);

ReactDOM.render(
  <Provider store = {store}>
    <App/>
  </Provider>
  ,
  document.getElementById('root'));

【问题讨论】：

所以，为了解决这个问题，我将 react-cookie 库更改为 Universal-cookie 并且它可以工作。但问题仍然存在，为什么没有定义？它应该在服务器端定义吗？（但在没有服务器的 react-cookie github 上的 README 中有一个示例）

标签： javascript reactjs cookies react-redux

【解决方案1】：

HttpOnly

如果您确信自己正确使用了universal-cookie（或类似的包），并且仍然得到undefined：
检查（在源代码中）cookie 是如何设置的（或使用 cookie 检查器浏览器扩展程序进行检查，例如 EditThisCookie for Chrome，并检查 HttpOnlyproperty）。
如果HttpOnly 设置为true，那么（根据定义）没有javascript 将能够访问它（即the point 的HttpOnly）。因此，该值将返回为undefined。

来自developer.mozilla.org/en-US/docs/Web/HTTP/Cookies：

限制对 cookie 的访问

JavaScript Document.cookie API 无法访问具有HttpOnly 属性的cookie；它只发送到服务器。例如，保持服务器端会话的 cookie 不需要对 JavaScript 可用，并且应该具有 HttpOnly 属性。这种预防措施有助于缓解跨站点脚本 (XSS) 攻击。

【讨论】：

【解决方案2】：

似乎以前存在于react-cookie npm 包中的功能已移至universal-cookie。 universal-cookie repository 现在的相关示例是：

import Cookies from 'universal-cookie';
const cookies = new Cookies();
cookies.set('myCat', 'Pacman', { path: '/' });
console.log(cookies.get('myCat')); // Pacman

Source（原答案作者的所有功劳）

【讨论】：