fetch默认不携带cookie

Posted 2020-10-04

最近在使用fetch向服务器发送请求，过程中的体会和遇到的问题在这里记录一下。

fetch返回的是一个Promise对象，我们可以对返回的结果做进一步的处理，这是与传统ajax的一个区别。

简单的请求写法如下：

fetch(url)
    .then(res => res.json())
    .then(json => {
        console.log(json);
    }) 

也可以设置method、headers、body等参数，详见fetch api。

----------------------------------------------------------------------------------------------

接下来主要是关于fetch的一个坑，那就是fetch默认不会携带cookie。

我们在做判断用户是否已登录等权限问题的时候，有一种做法（这里以express-session为例）是用户登录时将信息存入session

req.session.user = user;

此时，服务端会发送给客户端相应的cookie

之后，来自客户端的每一个请求，都会带有这个cookie

而服务端通过这个cookie得到req.session.user（如果没有cookie，那么req.session.user === undefined），便可判断用户是否已登录

if (!req.session.user) {
    console.log("未登录");
}

使用fetch发送请求的我就这样掉坑里了。

想要解决这个问题其实很简单，那就是在参数里加一个字段credentials: true，如：

fetch(url, {
    method: ‘GET‘,
    credentials: ‘include‘
})

这样，在一般情况下应该是没问题了，没错，还有特殊情况，那就是跨域。

如果我们进行的是跨域请求而且是用CORS(对CORS不了解的可以看看这个)来处理的，那么我们就需要在服务端设置一些字段，比如：

‘Access-Control-Allow-Origin‘, ‘http://localhost:8080‘,  // 不能使用*，必须指定域名，大概是出于安全考虑
‘Access-Control-Allow-credentials‘, ‘true‘  // 表示允许发送cookie到服务端

到此为止问题就解决了。

 

如有不对，烦请指正