脚本无法读取 Cookie答案

【问题标题】：Cookie cannot be read by script脚本无法读取 Cookie
【发布时间】：2019-06-29 23:51:17
【问题描述】：

我正在尝试使用 js-cookie 包通过以下 Javascript 代码从浏览器读取 cookie。但是，cookie 没有被读取。

import Cookies from 'js-cookie';
var cookie_name = 'cookie';
var cookie = Cookies.get(cookie_name);
console.log(cookie);

cookie 是使用以下 Python 代码创建的，该代码利用 Flask。

response.headers.add('Access-Control-Allow-Headers', 'Content-Type, text/plain')
response.headers.add('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS')
response.headers.add('Access-Control-Allow-Credentials', 'true')
response.set_cookie(key='cookie',
                value=payload,
                domain='<url>')

Flask 应用有以下参数

app = Flask(__name__)
app.config['DEBUG'] = True
app.config['SESSION_COOKIE_HTTPONLY'] = False

上面我已经关闭了HttpOnly 标志，所以我的脚本应该能够读取cookie。我也看不到在浏览器中使用console.log(document.cookie) 的cookie。我的JS代码无法读取cookie有什么原因吗？

【问题讨论】：

Cookies 不是有效的浏览器 API。 Cookie 始终通过 document.cookies 获取/设置。
@Geuis，他好像在用react-cookie
@Geuis 我正在使用js-cookie 库
你是如何构建烧瓶响应的？
后端和前端是否托管在不同的服务器/域上？

标签： javascript reactjs google-chrome cookies flask

【解决方案1】：

如果您在浏览器控制台中看不到 cookie，则表示它没有被设置或仅使用 HTTP 设置。

SESSION_COOKIE_HTTPONLY 应该只影响 Flask 设置的会话 cookie，看起来你正在尝试设置一个完全不同的 cookie。

我愿意：

确认确实设置了 cookie（您可以通过开发工具检查）
如果正在设置，并且以某种方式设置为仅启用了 HTTP，请更改您的代码：

...

response.set_cookie(key='cookie', value=payload, domain=<url>, httponly=False)

【讨论】：

【解决方案2】：

您应该使用“react-cookie”，通过 npm 安装它。然后在您的组件中尝试使用 Cookies 导入 HOC

import { withCookies } from 'react-cookie';

按键获取cookies绑定

    function getCookieFucnctionTest(myRecordFromCookies) {
       var value = "; " + document.cookie;
       var parts = value.split("; " + myRecordFromCookies+ "=");
       if (parts.length === 2) return parts.pop().split(";").shift();
     }

使用getCookieFucnctionTest后将其放入一个参数中

使用 HOC 导出您的组件

export default withCookies(MyComponent);

【讨论】：

由于简单，我想使用js-cookie 库。此外，切换包也无济于事，因为在浏览器上未检测到 cookie。目前尚不清楚为什么无法通过脚本读取此 cookie，因为 Flask 设置应该允许它可读

【解决方案3】：

您无法通过console.log(document.cookies) 查看您的 cookie，这可能表明您的 cookie 的域或路径与浏览器尝试访问的内容不匹配。

EG：如果您的后端/Flask 应用程序在 api.example.com:8080 上运行并且客户端正在使用 www.example.com:80，那么您需要将域显式设置为 .example.com 以便在全局上可读您的域，在您的 AJAX 请求中设置 cookie 时，您可能会遇到 CORS 错误，您可能需要将以下标头添加到 Flask：

response.headers.add('Access-Control-Allow-Headers', 'Content-Type, Set-Cookie')
response.headers.add('Access-Control-Allow-Origin', 'http://www.example.com')
response.headers.add('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS')
response.headers.add('Access-Control-Allow-Credentials', 'true')
response.set_cookie(key='cookie',
                value=payload,
                domain='.example.com')

您也可以强制使用path='/'，但 Flask 似乎默认情况下会这样做，无论如何您应该能够看到您的 Cookie，即使使用不同的路径，但在屏幕下方您选择的 DevTools 上设置在同一域上@ 987654325@（如果路径设置不正确console.log(document.cookies)不会产生任何结果，或者可能会删除您所追求的cookie）

【讨论】：