cookie
- 每次http请求都会携带cookie, 已帮助识别身份
- 服务端也可以向客户端
set-cookie, cookie 大小限制4kb - 默认有跨域限制:
- 不可跨域共享: iframe 跨域了无法获取到cookie
- 不可跨域传递cookie: ajax请求跨域无法携带cookie
如何实现跨域传递cookie
要在跨域请求中通过 Axios 携带 Cookie，需同时在前端（Axios 配置）和后端（CORS 设置）进行配置
前端: 全局启用携带
import axios from 'axios';
axios.defaults.withCredentials = true; // 全局启用携带 Cookie[citation:1][citation:3][citation:6]
前端: 单次请求配置
axios.get('https://api.example.com/data', {
withCredentials: true // 仅当前请求携带 Cookie[citation:1][citation:6]
});
// Fetch API：使用 credentials: 'include'
fetch('https://api.com/data', { credentials: 'include' });
后端
app.use((req, res, next) => {
// `Access-Control-Allow-Origin`：必须指定具体域名
res.header('Access-Control-Allow-Origin', 'https://your-frontend.com');
// `Access-Control-Allow-Credentials`：必须设为 true
res.header('Access-Control-Allow-Credentials', 'true');
res.header('Access-Control-Allow-Methods', 'GET,POST,PUT,DELETE');
next();
})
如何实现跨域共享cookie
- 什么是跨域共享cookie
- 页面的网址是a.com
- 页面中有一个
iframe, 网址是 b.com - 此时
iframe就跨域了,iframe无法共享到a.com的cookie - 那么要如何实现共享呢:
- cookie默认跨域不共享, 但有些情况下可设置为共享
- 主域名相同:
www.baidu.comimg.baidu.com - 设置cookie domain 为主域名, 既可共享cookie
cookie的本地存储
- HTML5之前,
cookie常用于本地存储 - HTML5之后,推荐使用
localStorage或sessionStorage
cookie 和 session
- cookie用于登录验证, 存储用户标识(如 userId)
- session 在服务端, 存储用户详情, 和cookie信息一一对应
- cookie + session 是常见的登录验证的解决方案
token
cookie vs token
- cookie是http规范, 自动传
- token是自定义传递, 手动传
- cookie会被浏览器自动存储
- token需要手动存储
- token默认没有跨域限制
JWT
-
登录成功, 后端返回一个token
-
前端自行存储token
-
之后前端每次请求接口都把token带上
-
优点:
- 硬件成本低
- 多进程, 多服务端, 不受影响
-
缺点:
- 无法快速封禁某个用户
session
-
优点
- 可快速封禁某个用户
-
缺点
- 硬件成本高,占用服务端内存
- 麻烦, 需要用到radis
- 默认有跨域限制
单点登录
什么是单点登录
- 如果我已经登录了
百度搜索 - 那么我去访问
百度贴吧时它会自动登录, 不必再重新登录一次 - 我们将这种现象叫单点登录
实现方式1: cookie 跨域共享
基于cookie
- cookie默认跨域不共享, 但有些情况下可设置为共享
- 主域名相同:
www.baidu.comtieba.baidu.com - 设置cookie domain 为主域名, 既可共享cookie
Domain=.baidu.com：使所有子域（如api.baidu.com）可共享 Cookie
Set-Cookie: token=abc123; Domain=.baidu.com;
实现方式2: SSO
- 如果主域名相同, 使用cookie共享域名就可以了
- 如果主域名不同, 则需使用SSO
- 【一节课搞定单点登录】 www.bilibili.com/video/BV19S…
实现方式3: OAuth2.0
- 通过微信扫码登录
- 通过Google账号登录
- 等等...
