当前位置：首页 > 行业动态 > 正文

fetch api 传token

使用Fetch API时，在请求头 headers中添加 Authorization: Bearer ${token}，确保token安全传输，建议配合HTTPS协议防止

Fetch API 传递 Token 的基本原理

Fetch API 是浏览器提供的用于发起网络请求的接口，传递 Token 的核心是将 Token 放入 HTTP 请求头中（如 Authorization 字段），通常格式为：

Authorization: Bearer <token>

Token 一般用于身份验证或授权，常见类型包括 JWT（JSON Web Token）、OAuth 2.0 的访问令牌等。

实现步骤与代码示例

获取 Token

Token 通常从以下来源获取：

  • 本地存储：如 localStorage 或 sessionStorage。
  • Cookie：服务器下发的 HttpOnly Cookie。
  • 前端内存：如通过 API 调用直接返回。

设置请求头

在 fetch 的 headers 配置中添加 Authorization 字段。

代码示例

// 从 localStorage 获取 Token
const token = localStorage.getItem('authToken');
// 发起带 Token 的请求
fetch('https://api.example.com/data', {
  method: 'GET',
  headers: {
    'Authorization': `Bearer ${token}`, // 关键：添加 Token
    'Content-Type': 'application/json' // 根据接口要求设置
  }
})
.then(response => {
  if (!response.ok) {
    throw new Error('HTTP status ' + response.status);
  }
  return response.json();
})
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

常见问题与解决方案

问题 解决方案
Token 过期或失效 检测响应状态码（如 401 Unauthorized）
跳转登录页或刷新 Token。
跨域请求携带 Token 确保服务器允许跨域并设置 Access-Control-Allow-Origin 和 Credentials。
Token 泄露风险 避免将 Token 暴露在 URL 参数中
使用 HttpOnly Cookie 或加密存储。

安全性注意事项

  1. 避免 XSS 攻击：不要在前端代码中直接拼接 Token 到 URL 参数。
  2. HttpOnly Cookie：Token 存储在 Cookie 中，标记为 HttpOnly 防止 JavaScript 读取。
  3. HSTS 配置：确保 API 使用 HTTPS，避免 Token 被中间人窃取。

相关问题与解答

问题 1：Token 过期后如何自动刷新？

解答：

  1. 服务器应提供刷新 Token 的接口（如 refresh_token）。
  2. 前端在捕获到 401 错误时，调用刷新接口获取新 Token。
  3. 示例代码： 
    function refreshToken() {
  return fetch('https://api.example.com/refresh', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({refreshToken: localStorage.getItem('refreshToken')})
  })
  .then(response => response.json())
  .then(data => {
    localStorage.setItem('authToken', data.accessToken);
    return data.accessToken;
  });
}

问题 2：如何在移动端（如 React Native）中使用 Fetch API 传递 Token？

解答：

  1. 移动端逻辑与 Web 端一致，需注意存储方式（如使用 AsyncStorage）。

  2. 示例（React Native）：

    import AsyncStorage from '@react-native-async-storage/async-storage';
// 获取 Token
const getToken = async () => {
  return await AsyncStorage.getItem('authToken');
};
// 发起请求
const token = await getToken();
fetch('https://api.example.com/data', {
  headers: {Authorization: `Bearer ${token}`}
});
Fetch API
0

相关文章