Cookie就摆在那，为何死活吃不到？

做者：codexu

---

浏览器里明明存在的cookie，竟然获取不到？？？

console.log(document.cookie);
// 没有???
复制代码

原由

近来闲来无事，打算了解一下后端，既然想一探究竟，就从基本的注册登陆开始作起。

技术选型

做为一名前端开发人员，用 Node.js 去体验后端应该是最快上手的方式了。看了一下文档，好长...没那么多时间看，直接...

• 框架 koa2
• 数据库 Mysql，不会操做数据库找到了 Sequelize
• 请求 Axios

思路

• 帐户密码，不作加密，直接明文。
• 登录
  • 使用 jwt (jsonwebtoken) 生成 token 。
  • 使用 koa2 ctx.cookies.set 在后端设置 cookie ，保存 token 。
• 跨域请求 koa2-cors

问题来了

问题一：填好用户名密码，点击登陆，浏览器中没有被设置 cookie

解决办法： 使用 Axios 请求时，增长属性 withCredentials: true，这样就请求就能够携带 cookie 了。

产生这种状况的缘由是由于 koa2-cors，若是在前端使用代理跨域不会出现这种状况。

问题二：浏览器中虽然能看到 cookie 中已经存在 token，可是前端代码中获取不到

解决办法：koa2 设置 cookie 时，设置 httpOnly: false 便可。

查找缘由

doucment.cookie 没法获取到 cookie 是由于 同源策略 和 HttpOnly 标记的缘由。

withCredentials：表示跨域请求时是否须要使用凭证，默认是 false

MDN XMLHttpRequest.withCredentials 属性是一个 Boolean 类型，它指示了是否该使用相似 cookies,authorization headers(头部受权)或者TLS客户端证书这一类资格证书来建立一个跨站点访问控制（cross-site Access-Control）请求。在同一个站点下使用 withCredentials 属性是无效的。 此外，这个指示也会被用作响应中 cookies 被忽视的标示。默认值是 false。 若是在发送来自其余域的 XMLHttpRequest 请求以前，未设置 withCredentials 为true，那么就不能为它本身的域设置 cookie 值。而经过设置 withCredentials 为true得到的第三方 cookies，将会依旧享受同源策略，所以不能被经过 document.cookie 或者从头部相应请求的脚本等访问。

httpOnly：服务器可访问 cookie, 默认是 true

MDN 为避免跨域脚本 (XSS) 攻击，经过JavaScript的 Document.cookie API没法访问带有 HttpOnly 标记的Cookie，它们只应该发送给服务端。若是包含服务端 Session 信息的 Cookie 不想被客户端 JavaScript 脚本调用，那么就应该为其设置 HttpOnly 标记。

换种方式

MDN 上说 可能会 XSS 攻击，因此换种方式，存储到 localstorage 里吧。请求时，将 token 加在 header 中 Authorization。

总结

虽然绕了一圈，好像总结了两个没啥卵用的知识点，可是学习就是这样，遇到坑就积累一下。

但愿有大佬能指点一下，如何作一个安全的登陆。