React 不会自动发送 Cookie

React 是一个用于构建用户界面的 JavaScript 库，它并不会自动发送 Cookie。本文将探讨 React 中 Cookie 的使用，以及如何手动发送 Cookie。

什么是 Cookie？

Cookie 是一种在客户端存储数据的机制，常用来记录用户的登录状态、购物车内容等。当用户第一次访问某个网站时，服务器可以通过响应头设置一个名为 Set-Cookie 的信息，客户端在接收到响应后会将这个信息存储下来。之后每次发送请求时，客户端都会将保存的 Cookie 发送给服务器，以便服务器识别客户端。

React 中如何使用 Cookie？

在 React 中使用 Cookie 与在普通网页中使用相同。通常情况下，我们可以使用第三方库如 js-cookie 来处理 Cookie。

import Cookies from 'js-cookie';

// 设置 Cookie
Cookies.set('name', 'value');

// 获取 Cookie
const name = Cookies.get('name');

// 删除 Cookie
Cookies.remove('name');

需要注意的是，由于 React 是单页应用，每次路由跳转时不会重新加载页面，因此设置 Cookie 的地方只需要执行一次即可。

如何手动发送 Cookie？

React 并不会自动发送 Cookie，但我们可以手动将 Cookie 添加到请求头中发送。

例如，我们可以使用 axios 库来发起 AJAX 请求，同时通过 withCredentials 参数将 Cookie 发送到服务器。

import axios from 'axios';

axios.get('https://example.com/data', {
  withCredentials: true
}).then(response => {
  console.log(response.data);
}).catch(error => {
  console.error(error);
});

需要注意的是，如果我们想要在跨域请求时发送 Cookie，那么服务器需要设置响应头 Access-Control-Allow-Credentials: true。如果没有这个响应头，浏览器将不会发送 Cookie。

总结

本文介绍了 React 中 Cookie 的使用方法、手动发送 Cookie 的方式。在开发过程中，我们应当清楚了解 Cookie 的机制，合理使用 Cookie 并且保证安全性。