服务端与浏览器cookie

本文详细解析了跨域环境下如何正确地在服务端设置Cookie并确保客户端能够接收,以及如何配置前端请求使Cookie能随请求发送至服务端。通过调整响应头和前端请求配置,解决跨域带来的Cookie失效和消失问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

大家都知道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写入浏览器当中,所以我们的响应头得进行修改:

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,需要在配置中进行设置,
在这里插入图片描述
withCredentials设置为true即可.

总结:服务端的头部的设置和前端请求方式withCredentials凭证的开启是要同时满足的。否则,即使服务器同意发送Cookie,浏览器也不会发送。或者,服务器要求设置Cookie,浏览器也不会处理。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值