Javascript 脚本无法读取Cookie

我正在尝试使用

jscookie

包通过以下Javascript代码从浏览器读取cookie。但是，未读取cookie

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

cookie是使用下面利用

Flask

的Python代码创建的

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>')

---

上面我已经关闭了

HttpOnly

标志，因此我的脚本应该能够读取cookie。我也无法在浏览器中使用

console.log（document.cookie）

查看cookie。我的JS代码无法读取cookie有什么原因吗？

您应该使用“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();
     }

使用GetCookieFunctionTest并将其转换为参数后

使用HOC命令导出组件

export default withCookies(MyComponent);

---

如果在浏览器控制台中看不到cookie，则表示未设置cookie或仅使用HTTP设置cookie

SESSION\u COOKIE\u HTTPONLY

只应影响Flask设置的会话COOKIE，看起来您正在尝试完全设置不同的COOKIE

我想：

确认确实设置了cookie（您可以通过dev工具进行检查）

如果正在设置，并且以某种方式设置为仅启用HTTP，请更改代码：

response.set\u cookie（key='cookie'，value=payload，domain=，httponly=False）

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

例如：如果您的后端/Flask应用程序在api.example.com:8080上运行，而客户端使用的是www.example.com:80，那么您需要显式地将域设置为

.example.com

，以便在您的域上全局可读，并且在您的AJAX请求上设置cookie时，您可能会发生CORS错误，您可能需要将以下标题添加到烧瓶：

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会这样做，在任何情况下，您都应该能够在屏幕

Application>Cookies

（如果路径设置不正确

console.log（document.Cookies））下的DevTools上看到您的cookie，即使路径不同，但设置在同一域上

不会产生任何结果，或者可能会删除您要查找的cookie）

Cookies

不是有效的浏览器api。cookie总是通过document.Cookies来获取/设置。@Geuis，似乎他在使用

react cookie

@Geuis我在使用

js cookie

库你是如何构建flask响应的？后端和前端是否托管在不同的服务器/域上？由于简单，我想使用

js cookie

库。此外，由于浏览器上未检测到cookie，因此切换包也没有帮助。不清楚为什么不能通过脚本读取此cookie，因为烧瓶设置应该允许它可读

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

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')