react如何接受cookie
在React中接收Cookie的方法
使用document.cookie直接读取Cookie
在React组件中可以通过document.cookie访问当前页面的Cookie。这种方式简单直接，但需要注意安全性问题。例如：
const cookies = document.cookie;
console.log(cookies); // 输出所有Cookie字符串解析Cookie字符串
document.cookie返回的是分号分隔的字符串，需要手动解析：
const getCookie = (name) => {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) return parts.pop().split(';').shift();
};
const myCookie = getCookie('cookieName');使用第三方库处理Cookie
推荐使用js-cookie库简化操作：
npm install js-cookie使用示例：
import Cookies from 'js-cookie';
// 获取Cookie
const userToken = Cookies.get('token');
// 设置Cookie
Cookies.set('theme', 'dark', { expires: 7 });
// 删除Cookie
Cookies.remove('theme');服务器端渲染(SSR)场景
在Next.js等框架中，需要通过请求对象访问Cookie：
export async function getServerSideProps(context) {
const cookies = context.req.headers.cookie;
// 解析逻辑...
return { props: { cookies } };
}安全注意事项
- 标记为HttpOnly的Cookie无法通过JavaScript读取
- 敏感数据不应仅依赖前端Cookie验证
- 考虑使用SameSite和Secure属性增强安全性
与HTTP请求配合使用
在axios等HTTP库中自动发送Cookie：
axios.get('/api/data', { withCredentials: true });确保后端设置了正确的CORS头：
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: your-domain.com
