在现代网络应用程序的开发中，Cookie 扮演着重要的角色，它是服务器发送到用户浏览器并保存在本地的一小块数据，用于在客户端和服务器之间传递信息，而 JavaScript（简称 JS）作为一种广泛应用于网页开发的脚本语言，经常被用于操作 Cookie，JS 写的 Cookie 会传到服务器吗？这一个值得深入探讨的难题??。
Cookie 的基本概念
让我们简要回顾一下 Cookie 的基本概念，Cookie 是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带上并发送到服务器上，通过这种方式，服务器可以识别用户的情形，例如用户是否登录、用户的偏好设置等。
一个典型的 Cookie 由下面内容几部分组成：
- 名称（Name）：用于标识 Cookie 的唯一名称。
- 值（Value）：Cookie 所存储的数据内容。
- 域（Domain）：指定了哪些域名可以访问该 Cookie。
- 路径（Path）：指定了哪些路径下的页面可以访问该 Cookie。
- 过期时刻（Expires/Max-Age）：决定了 Cookie 的有效期。
JS 操作 Cookie 的技巧
在 JavaScript 中，可以使用
document.cookie
属性来操作 Cookie，通过它，我们可以读取、创建和删除 Cookie。
属性来操作 Cookie，通过它，我们可以读取、创建和删除 Cookie。
读取 Cookie
function getCookie(name) const value = `; $document.cookie}`; const parts = value.split(`; $name}=`); if (parts.length === 2) return parts.pop().split(&39;;&39;).shift();}const username = getCookie(&39;username&39;);console.log(username);
创建 Cookie
function setCookie(name, value, days) let expires = &39;&39;; if (days) const date = new Date(); date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); expires = `; expires=$date.toUTCString()}`; } document.cookie = `$name}=$value}$expires}; path=/`;}setCookie(&39;username&39;, &39;JohnDoe&39;, 30);
删除 Cookie
function deleteCookie(name) document.cookie = `$name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;}deleteCookie(&39;username&39;);
JS 写的 Cookie 什么时候会传到服务器
后续的同源请求
当浏览器向同一域名下的服务器发起后续请求时，会自动在请求头中携带之前设置的 Cookie，当用户在一个网站上登录后，服务器会设置一个包含用户登录情形的 Cookie，之后，用户在该网站上进行其他操作，如访问其他页面或提交表单时，浏览器会将这个 Cookie 包含在请求头中发送到服务器。
假设我们有一个简单的示例网站，用户登录后，服务器设置了一个名为
isLoggedIn
的 Cookie，值为
true
，当用户访问该网站的另一个页面时,浏览器会在请求头中添加如下内容：
，当用户访问该网站的另一个页面时,浏览器会在请求头中添加如下内容：
Cookie: isLoggedIn=true
这样，服务器就可以通过检查这个 Cookie 来确定用户是否已经登录。
AJAX 请求
在使用 AJAX（Asynchronous JavaScript and XML）进行异步请求时，同样会自动携带 Cookie，使用
fetch
API 或
XMLHttpRequest
对象发送请求时，浏览器会默认包含当前页面的 Cookie。
对象发送请求时，浏览器会默认包含当前页面的 Cookie。
fetch(&39;/api/data&39;, method: &39;GET&39;}).then(response => response.json()).then(data => console.log(data)).catch(error => console.error(error));
在这个
fetch
请求中，浏览器会自动在请求头中添加相关的 Cookie。
请求中，浏览器会自动在请求头中添加相关的 Cookie。
跨域请求
一般情况下，跨域请求不会自动携带 Cookie，这是出于安全考虑,防止恶意网站通过跨域请求获取其他网站的用户敏感信息。
在浏览器中访问
https://example.com
时设置的 Cookie，在向
https://anotherdomain.com
发起请求时,默认不会携带。
发起请求时,默认不会携带。
存在一些独特情况可以实现跨域携带 Cookie：
- JSONP（JSON with Padding）：一种通过动态创建
<script>标签来实现跨域数据交互的技术，虽然它可以跨域获取数据，但只支持 GET 请求，并且安全性相对较低，在 JSONP 请求中，Cookie 会被携带。
- 标签来实现跨域数据交互的技术，虽然它可以跨域获取数据，但只支持 GET 请求，并且安全性相对较低，在 JSONP 请求中，Cookie 会被携带。
- CORS（Cross-Origin Resource Sharing）：现代浏览器支持的一种跨域机制，服务器端可以通过设置响应头来允许跨域请求携带 Cookie。
服务器端设置响应头允许跨域携带 Cookie 的示例代码（Node.js + Express）：
const express = require(&39;express&39;);const app = express();app.use((req, res, next) => res.setHeader(&39;Access-Control-Allow-Origin&39;, &39;https://anotherdomain.com&39;); res.setHeader(&39;Access-Control-Allow-Credentials&39;, true); next();});app.get(&39;/api/data&39;, (req, res) => res.json( message: &39;This is some data&39; });});const port = 3000;app.listen(port, () => console.log(`Server running on port $port}`);});
在客户端发起跨域请求时，需要设置
credentials: 'include'
选项：
选项：
fetch(&39;https://anotherdomain.com/api/data&39;, method: &39;GET&39;, credentials: &39;include&39;}).then(response => response.json()).then(data => console.log(data)).catch(error => console.error(error));
影响 Cookie 传输到服务器的影响
浏览器设置
不同的浏览器对 Cookie 的处理方式可能有所不同，有些浏览器可能会限制第三方 Cookie 的传输，或者提供用户可以选择是否在跨域请求中携带 Cookie 的选项。
在 Chrome 浏览器中，用户可以在设置中找到隐私和安全相关的选项，来控制 Cookie 的行为。
服务器配置
服务器端可以通过设置响应头来控制是否允许 Cookie 在跨域请求中传输，如前面提到的 CORS 配置，服务器需要正确设置
Access-Control-Allow-Origin
和
Access-Control-Allow-Credentials
等响应头。
等响应头。
如果服务器配置不当，可能会导致 Cookie 无++常传输到服务器。
Cookie 的属性
Cookie 的一些属性也会影响它是否被传输到服务器，Cookie 的域和路径设置决定了哪些请求会携带该 Cookie，Cookie 的域设置不正确,可能会导致在某些请求中无法携带。
Cookie 的过期时刻也很重要，Cookie 已经过期,浏览器可能不会再将其发送到服务器。
JS 写的 Cookie 在一般情况下会在后续的同源请求和 AJAX 请求中自动传到服务器，而在跨域请求中，默认不会携带 Cookie，但可以通过 JSONP 或 CORS 等技术手段来实现跨域携带 Cookie。
浏览器设置、服务器配置以及 Cookie 的属性等影响都会对 Cookie 是否能成功传输到服务器产生影响，在开发经过中，开发者需要充分了解这些机制，合理设置和管理 Cookie,以确保用户信息的安全和应用程序的正常运行。
希望通过这篇文章小编将的深入探讨，能让你对 JS 写的 Cookie 与服务器之间的交互有更清晰的认识??，无论是前端开发者还是后端开发者，都需要掌握这些聪明，以便更好地构建健壮、安全的网络应用程序。
