使用 Fetch API 发送带认证凭据的请求需设置 credentials 选项：'include' 用于 Cookie 认证（要求服务端配置 Access-Control-Allow-Credentials: true 和明确 origin），'same-origin' 为默认仅同源发送，'omit' 不发送；Bearer Token 则通过 Authorization 请求头传递，并建议优先采用 HttpOnly Cookie + credentials: 'include' 提升安全性。
在 JavaScript 中使用 Fetch API 发送带认证凭据的请求，关键在于正确设置 credentials 选项，并配合服务端支持（如 CORS 配置）。默认情况下，Fetch 不会携带 Cookie 或 HTTP 认证头，必须显式启用。
设置 credentials 选项
Fetch 的 credentials 选项控制是否发送用户凭据（如 Cookie、HTTP 认证头、TLS 客户端证书）：
-
'include'：始终发送凭据（即使跨域），要求服务端响应中包含Access-Control-Allow-Credentials: true -
'same-origin'：仅同源请求发送凭据（默认值） -
'omit'：从不发送凭据（等价于未设置该选项）
登录后需要保持会话的常见场景（如调用需 Cookie 验证的接口），应使用 include：
method: 'GET',
credentials: 'include'
})
携带 Bearer Token 认证
若后端使用 Token（如 JWT）认证，无需 credentials: 'include'，而是通过 Authorization 请求头传递：
立即学习“Java免费学习笔记（深入）”；
fetch('/api/data', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${token}`
},
body: JSON.stringify({ key: 'value' })
})
注意：Token 应安全存储（避免 XSS 泄露），优先考虑 HttpOnly Cookie + credentials: 'include' 组合用于敏感操作。
处理跨域与 Cookie 的注意事项
当使用 credentials: 'include' 跨域请求时，必须满足以下条件，否则浏览器直接拒绝请求：
- 服务端响应头必须包含
Access-Control-Allow-Credentials: true -
Access-Control-Allow-Origin不能为*，必须指定明确的源（如https://example.com） - Cookie 必须设置
SameSite=None且Secure（HTTPS 环境下才有效）
例如，后端（Express 示例）需这样配置 CORS：
app.use(cors({origin: 'https://your-frontend.com',
credentials: true
}));
完整示例：登录后获取用户数据
假设登录成功后服务端已写入 HttpOnly Cookie，后续请求只需带上凭据：
async function fetchUserProfile() {try {
const res = await fetch('/api/user', {
method: 'GET',
credentials: 'include'
});
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return await res.json();
} catch (err) {
console.error('获取用户信息失败:', err);
}
}
该方式适用于 Session + Cookie 的传统认证流程，安全性更高（Token 不暴露在 JS 环境中）。
