在 javascript 中，fetch api 本身并不直接提供 session 策略，因为它是基于 promise 的底层 http 客户端，默认不自动管理 cookie。要实现类似传统 web 应用的 session 机制，核心做法是配置 credentials: 'same-origin'（同源）或 'include'（跨域），让浏览器自动携带当前域名下的 cookie。服务端需配合设置 set-cookie 响应头来维持会话状态。若涉及跨域请求，还需在服务端正确配置 cors 的 access-control-allow-credentials: true 并指定具体的 origin，同时前端必须显式开启凭证传递。
如何配置 Fetch 以支持同源 Session 保持
对于同源请求，只需在 fetch() 选项中添加 credentials: 'same-origin' 即可。浏览器会自动将当前页面所属域的 Cookie 附加到请求头中，服务端通过解析这些 Cookie 识别用户身份。这是最安全且常用的方式，适用于大多数单页应用（SPA）与后端 API 同域部署的场景。
const response = await fetch('/api/user', {
method: 'GET',
credentials: 'same-origin'
});
if (response.ok) {
const data = await response.json();
console.log('User:', data.name);
} else {
console.error('Failed to fetch user');
}
上述代码向 /api/user 发起 GET 请求。由于设置了 credentials: 'same-origin'，浏览器会发送当前域的所有 Cookie。假设服务端已设置 Set-Cookie: session_id=abc123; HttpOnly; SameSite=Lax，则后续请求都会携带该 session_id，从而实现 Session 跟踪。返回的 JSON 数据包含用户信息，如 {"name": "Alice"}。若未设置此选项，默认行为为 'omit'，即不发送任何 Cookie，导致服务端无法识别用户。
跨域请求下如何正确传递 Session Cookie
当前端与后端位于不同域名时，必须使用 credentials: 'include' 并配合服务端 CORS 配置。前端需显式声明允许携带凭证，服务端需在响应头中设置 Access-Control-Allow-Credentials: true 和具体的 Access-Control-Allow-Origin（不能是通配符 *）。否则，浏览器会拦截请求或忽略 Cookie，导致 Session 失效。
const response = await fetch('https://api.example.com/data', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ key: 'value' }),
credentials: 'include'
});
const result = await response.json();
console.log('Result:', result.status); // 输出: "success"
此代码向跨域地址 https://api.example.com/data 发送 POST 请求。关键点是 credentials: 'include'，它指示浏览器即使跨域也要发送 Cookie。服务端必须响应：Access-Control-Allow-Origin: https://frontend.example.comAccess-Control-Allow-Credentials: true
若服务端返回 Access-Control-Allow-Origin: *，浏览器将拒绝携带 Cookie，导致 Session 丢失。成功响应后，result.status 为 "success"，表明请求被正确处理且会话有效。
当服务端返回 Set-Cookie 时前端如何处理新 Session
前端无需手动解析或存储 Set-Cookie 响应头，浏览器会自动处理。只要请求满足同源或正确的跨域 CORS 条件，浏览器会将服务端设置的 Cookie 保存到对应域名下，并在后续请求中自动发送。开发者只需确保 credentials 配置正确，即可实现透明的 Session 管理。若发现 Cookie 未生效，通常是因为 CORS 配置错误或 credentials 未设置。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
