react如何接受cookie
在 React 中接收 Cookie
React 本身不直接处理 Cookie，但可以通过浏览器提供的 document.cookie API 或第三方库来实现。以下是几种常见方法：
使用 document.cookie 原生 API
通过 document.cookie 可以直接读取或设置 Cookie。读取时返回的是当前域名下的所有 Cookie 字符串，格式为 key=value 对，用分号分隔。
// 读取所有 Cookie
const allCookies = document.cookie;
console.log(allCookies); // 输出类似 "token=abc123; theme=dark"
// 解析特定 Cookie 值
function getCookie(name) {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) return parts.pop().split(';').shift();
}
const token = getCookie('token');使用第三方库（如 js-cookie）
js-cookie 是一个轻量级库，简化了 Cookie 操作：
import Cookies from 'js-cookie';
// 设置 Cookie
Cookies.set('username', 'john', { expires: 7 }); // 7天后过期
// 读取 Cookie
const username = Cookies.get('username');
// 删除 Cookie
Cookies.remove('username');在服务端渲染（SSR）中处理
如果使用 Next.js 等框架，服务端可通过请求头 req.headers.cookie 获取 Cookie：
// Next.js API 路由示例
export default function handler(req, res) {
const cookies = req.headers.cookie;
// 解析逻辑...
}与 HTTP 请求配合使用
发送请求时自动携带 Cookie（需设置 credentials）：
fetch('/api/data', {
credentials: 'include', // 包含 Cookie
});注意事项
- 安全性：避免存储敏感信息在 Cookie 中，必要时使用
HttpOnly和Secure标志。 - 路径和域名：设置 Cookie 时注意
path和domain参数，确保可访问性。 - 同源策略：跨域请求需配置 CORS 和
credentials。
