Featured image of post Web开发-Cookie

Web开发-Cookie

818字

Cookie 学习笔记

Cookie 是一种客户端会话跟踪技术,数据存储在客户端浏览器中。主要用于在同一次会话的不同请求之间共享数据

  1. 第一次请求:客户端访问服务器(如登录接口)
  2. 服务器响应:在响应中设置Cookie(包含用户ID、用户名等信息)
  3. 浏览器存储:自动将Cookie保存到本地
  4. 后续请求:浏览器自动携带该Cookie到服务器

三个关键"自动":

  • ✅ 服务器自动通过Set-Cookie响应头返回Cookie
  • ✅ 浏览器自动存储接收到的Cookie
  • ✅ 后续请求浏览器自动通过Cookie请求头携带Cookie

3. HTTP 协议支持

类型 头字段 说明
响应头 Set-Cookie 服务器设置Cookie
请求头 Cookie 客户端携带Cookie

4. 代码示例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
// 设置Cookie
@GetMapping("/c1")
public Result cookie1(HttpServletResponse response){
    response.addCookie(new Cookie("login_username","itheima")); 
    return Result.success();
}
    
// 获取Cookie
@GetMapping("/c2")
public Result cookie2(HttpServletRequest request){
    Cookie[] cookies = request.getCookies();
    for (Cookie cookie : cookies) {
        if(cookie.getName().equals("login_username")){
            System.out.println("login_username: "+cookie.getValue());
        }
    }
    return Result.success();
}

5. 测试流程

  1. 访问/c1接口 → 服务器设置Cookie → 浏览器存储

  2. 访问/c2接口 → 浏览器自动携带Cookie → 服务器读取

6. 优缺点分析

✅ 优点:

  • HTTP协议原生支持(浏览器自动处理)
  • 实现简单

❌ 缺点:

  1. 移动端兼容性问题
    • Android/iOS原生APP无法使用
  2. 安全性问题
    • 用户可以手动禁用Cookie
    • 存在CSRF风险
  3. 跨域限制
    • 无法在不同域之间共享Cookie

7. 跨域详解

跨域判定标准(任一不同即为跨域):

维度 示例1 示例2 是否跨域
协议 http https ✔️
IP 192.168.150.200 192.168.150.100 ✔️
端口 80 8080 ✔️

典型跨域场景:

1
2
前端:http://192.168.150.200/login.html
后端:http://192.168.150.100:8080/login

⚠️ 此时设置的Cookie无法跨域使用

8. 关键总结

  • Cookie是基于HTTP协议的会话管理技术
  • 自动管理机制由浏览器实现
  • 适合同域的Web应用,但在移动端跨域场景下受限
  • 重要数据应考虑配合其他安全措施使用

提示:现代Web开发中,对于身份认证等敏感场景,建议结合Token等更安全的技术方案。

如对内容有异议,请联系关邮箱2285786274@qq.com修改