React cookie 未存储在 Chrome 中，但在 Firefox 中答案

【问题标题】：React cookies not being stored in Chrome but are in FirefoxReact cookie 未存储在 Chrome 中，但在 Firefox 中
【发布时间】：2021-03-02 12:19:24
【问题描述】：

我尝试在 React 应用程序中使用通用 cookie 设置一个 cookie。我是这样设置的：

const cookies = new Cookies();
cookies.set('test_cookie', true, {
    sameSite: 'none',
    Secure: true,
});

我在执行 console.log(cookies.cookies) 时可以看到它：

{test_cookie: true}

但是当我使用cookies.getAll() 和cookies.get('test_cookie') 时，我分别得到{} 和undefined。这似乎只发生在 chrome 而不是 firefox 中（尚未测试 safari）。该应用程序也在另一个站点上运行，但我认为拥有 sameSite=None 和 Secure=true 应该可以解决这个问题。

【问题讨论】：

遇到了几乎相同的问题。我无法在 Google Chrome 中读取任何 cookie，但在 Firefox 中可以正常工作。期待解决方案。

标签： reactjs cookies

【解决方案1】：


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

或

你可以使用 react-cookie 包https://www.npmjs.com/package/react-cookie

与universal-cookie和universal-cookie-express集成


    // Root.jsx
    import React from 'react';
    import App from './App';
    import { CookiesProvider } from 'react-cookie';
     
    export default function Root() {
      return (
        <CookiesProvider>
          <App />
        </CookiesProvider>
      );
    }
    // App.jsx
    import React from 'react';
    import { useCookies } from 'react-cookie';
     
    import NameForm from './NameForm';
     
    function App() {
      const [cookies, setCookie] = useCookies(['name']);
     
      function onChange(newName) {
        setCookie('name', newName, { path: '/' });
      }
     
      return (
        <div>
          <NameForm name={cookies.name} onChange={onChange} />
          {cookies.name && <h1>Hello {cookies.name}!</h1>}
        </div>
      );
    }
     
    export default App;

【讨论】：