fetch默认不携带cookie

时间:2023-03-09 18:06:51
fetch默认不携带cookie

最近在使用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到服务端

到此为止问题就解决了。

如有不对,烦请指正