服务端与浏览器cookie

大家都知道cookie的作用很大，因为http是无状态协议，很多情况我们都是通过设置cookie，来实现业务上的需求，如登录。只是说不同的技术方案和不同的业务需求，我们的对cookie的操作有所差别，但都是基于cookie。
ps:
浏览器有同源策略，像localStorage都是遵循这一策略，但是cookie就有所不同，在同域不同端口下，cookie是可以共享的。举个栗子，我在localhost:8080，设置了一个cookie，为age=18，然后我在localhost:8089是可以从cookie中拿到这个age值的。

下面描述的是两个问题：
1、服务端向客户端设置cookie失效
2、客户端向服务端请求数据，cookie消失

场景介绍：用express作为服务端（端口3030），前端（端口3031）用axios进行一个接口请求。因为开发过程存在跨域，所以我在响应头进行如下处理：

app.all('*', function (req, res, next) {
    res.header("Access-Control-Allow-Origin", '*');
    res.header("Access-Control-Allow-Headers", "X-Requested-With,Content-Type,token");
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
});

并且接口里面有进行cookie的设置res.cookie(key,vlaue,option)
问题一：浏览器请求接口发现，响应头确实有Set-Cookie，但是并没有真正设置到浏览器的cookie当中。服务端与浏览器cookie
原因：存在跨域导致服务端无法正常那样把cookie写入浏览器当中，所以我们的响应头得进行修改：

app.all('*', function (req, res, next) {
    res.header("Access-Control-Allow-Origin", req.headers.origin);           //由原来的 * 改为当前请求的源
    res.header("Access-Control-Allow-Headers", "X-Requested-With,Content-Type,token");
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    res.header("Content-Type", "application/json;charset=utf-8");
    res.header("Access-Control-Allow-Credentials",true);    // 允许cookie的发送
    next();
});

注意就可以服务端就可以顺利的在跨域中把cookie写入浏览器。

问题二：我用axios请求时，发现浏览器的cookie，并没有顺利的发送给服务端？

原因：axios默认在跨域情况下是不会发送cookie，需要在配置中进行设置，
服务端与浏览器cookie
把withCredentials设置为true即可.

总结：服务端的头部的设置和前端请求方式withCredentials凭证的开启是要同时满足的。这有这样才能正常的进行服务端对客户端cookie的设置，和客户端发送cookie到服务端，服务端顺利的接收。

服务端与浏览器cookie

相关推荐