Vue.js中获取csrftoken失败求助：使用js-cookie无法获取该值

我之前也碰到过一模一样的情况——浏览器里明明能看到csrftoken存在，但Cookies.get('csrftoken')就是返回undefined，折腾了好久才找到原因，给你几个排查方向：

1. 检查Cookie的HttpOnly属性 #

打开浏览器开发者工具（F12）→ 切换到Application标签 → 找到Cookies下的你的域名，查看csrftoken的属性：

• 如果HttpOnly选项是勾选状态，那浏览器端的JavaScript是完全无法读取这个Cookie的，这是浏览器的安全限制。
• 解决办法：联系后端开发，在设置csrftoken Cookie的时候去掉HttpOnly属性，因为CSRF令牌需要前端能读取并放到请求头里。

2. 核对Cookie的名称（大小写敏感！） #

Cookie的名称是严格区分大小写的，比如后端如果设置的是CSRFToken（首字母大写），而你用csrftoken全小写去获取，肯定拿不到。

• 先确认浏览器里显示的Cookie名称到底是什么，然后严格匹配这个名称调用Cookies.get()。

3. 检查Cookie的路径（Path）设置 #

js-cookie默认只会读取当前页面路径下的Cookie，如果csrftoken的Path设置为/（根路径），而你的Vue项目部署在子路径（比如/dashboard），那默认调用Cookies.get('csrftoken')会找不到。

• 解决办法：获取的时候指定路径参数：

Cookies.get('csrftoken', { path: '/' })

4. 确认域名匹配 #

Cookie是绑定域名的，比如你在localhost:8080下访问，但csrftoken是设置在127.0.0.1:8080下的，这两个在浏览器里算不同域名，自然拿不到。

• 确保你的Vue项目访问的域名和设置csrftoken的域名完全一致。

你可以先按这个顺序排查，大概率是路径或者名称的问题。比如我当时就是因为后端把csrftoken的Path设成了根路径，而我的项目在子路径，加了{ path: '/' }就解决了。

内容的提问来源于stack exchange，提问作者user7693832