JavaScript 中怎么使用 Fetch API 发送带认证凭据的请求-js教程-PHP中文网

使用 fetch api 发送带认证凭据的请求需设置 credentials 选项：'include' 用于 cookie 认证（要求服务端配置 access-control-allow-credentials: true 和明确 origin），'same-origin' 为默认仅同源发送，'omit' 不发送；bearer token 则通过 authorization 请求头传递，并建议优先采用 httponly cookie + credentials: 'include' 提升安全性。

javascript 中怎么使用 fetch api 发送带认证凭据的请求

在 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：

fetch('/api/profile', {
method: 'GET',
credentials: 'include'
})

携带 Bearer Token 认证

若后端使用 Token（如 JWT）认证，无需 credentials: 'include'，而是通过 Authorization 请求头传递：

const token = localStorage.getItem('auth_token');

fetch('/api/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${token}`
  },
  body: JSON.stringify({ key: 'value' })
})

注意：Token 应安全存储（避免 XSS 泄露），优先考虑 HttpOnly Cookie + credentials: 'include' 组合用于敏感操作。

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

处理跨域与 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 环境中）。