如何在node和vue以axios作为交互的项目中使用cookie或者set-cookie

最近在用vue+node+mysql重构项目，前端用的vue+typescript写的，后端用的express框架，没有用太多的插件，用原始撸的。

项目地址https://github.com/Vitaminaq/node-mysql 欢迎交流。

刚好有个登陆页面，为了保存用户信息，必须得使用token。之前的思维一直局限在，用户登陆时，生成token，并用放在data里面返回来，客户端自己去存储，需要验证的页面把token放在请求的headers的authorization字段里面，后端每次去读这个字段就可以验证了，但是总感觉有点繁琐。样本我也贴一下吧，token我是用的jwt来生成的，至于存在哪里，浏览器那几种方法都还可以。

// 前端代码
axios.create({
     baseURL: 'http://127.0.0.1:3005',
     timeout: 5000,
     headers: {
         'Content-Type': 'application/json',
         'Cache-Control': 'no-cache',
         'authorization': window.sessionStorage.getItem('token')
     }
});

后面想到了响应头里面有个set-cookie字段，非常的简便，因为是全自动的，服务器自动把信息存入浏览器的cookie里面，用来记录验证信息非常方便。原生node的语法大致如下：

res.setHeader('Set-Cookie', [`token = ${token};path: '/'; secure: false; signed: false,userId = 1`]);
如果有多个字段，第二个参数可以是数组，结构就是key=value,后面跟一些对cookie配置的属性。

domain	String	Cookie的域名。默认为应用程序的域名
encode	Function	用于cookie值编码的同步函数。默认为`encodeURIComponent`。
expires	Date	GMT中cookie的到期日。如果未指定或设置为0，则创建会话cookie
httpOnly	Boolean	标记cookie只能由Web服务器访问。
maxAge	Number	方便的选项，用于设置相对于当前时间的到期时间（以毫秒为单位）。
path	String	Cookie的路径。默认为“/”
secure	Boolean	将cookie标记为仅与HTTPS一起使用。
signed	Boolean	指示cookie是否应该签名。
sameSite	Boolean or String	“SameSite” Set-Cookie属性的值。更多信息，请访问https://tools.ietf.org/html/draft-ietf-httpbis-cookie-same-site-00#section-4.1.1。

这些参数基本是用不太到的，但是大家可以去研究下，有个时候可以会涉及到cookie共享，各级域名间的共享等，就不多提了，世界之大，真要研究，好玩的太多了，一样东西都能腿玩年。

express的语法大概如下(配置字段跟上面是一样的)：

// 差不多就是把原生的拆成了单个的，看起来比较清晰。key, value, options，多个值的时候需要多行书写。
res.cookie('token', token, { path: '/', secure: false, signed: false });
res.cookie('nickname', nickname, { path: '/', secure: false, signed: false });

光设置这个是不够的，因为不属于跨域共享资源，所以需要一些设置的支持，客户端由于用了axios，就只说下axios吧。

在它官网上有个详细的请求头参数配置，里面有一个withCredentials字段，大概配置如下：(对于非axios的，其实也差不多，axios只不过是基于http的封装，万变不离其宗，把这个字段加在你的请求头里就ok了)

        axios.create({
            baseURL: 'http://127.0.0.1:3005',
            timeout: 5000,
            withCredentials: true, //表示跨域请求时是否需要使用凭证，默认为false
            headers: {
                'Content-Type': 'application/json',
                'Cache-Control': 'no-cache'
            }
        });

node端也需要进行该配置，大概如下：

app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "http://127.0.0.1:8088");
    res.header("Access-Control-Allow-Headers", "Content-Type, authorization, Cache-Control");
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
    res.header('Access-Control-Allow-Credentials', 'true'); // 就是这个字段
    next();
});

该字段可选。它的值是一个布尔值，表示是否允许发送Cookie。默认情况下，Cookie不包括在CORS请求之中。设为true，即表示服务器明确许可，Cookie可以包含在请求中，一起发给服务器。这个值也只能设为true，如果服务器不要浏览器发送Cookie，删除该字段即可。成功登陆的响应头大概如下图，然后后面的请求，请求头里面都会自带这个cookie，无需管理。

cookie设置成功

到这里差不多就摸索完了，如果觉得问题解决了，欢迎点赞，有什么疑问也可以讨论，欢迎交流。

如何在node和vue以axios作为交互的项目中使用cookie或者set-cookie

猜你喜欢