react 请求header 中设置 token的方式

<think>嗯，用户现在问的是在React中如何设置请求头中的token。首先，我需要确认用户的需求是什么。他们可能正在开发一个需要身份验证的前端应用，使用React作为框架，并且需要在发送HTTP请求时携带token，通常用于JWT或者其他类型的认证。 用户可能已经知道如何在JavaScript中发送请求，但不太清楚在React项目中如何组织代码，尤其是在组件中如何获取和存储token，然后将其添加到请求头中。可能需要考虑不同的HTTP客户端库，比如fetch API、Axios，或者可能他们使用了自定义的封装方法。 接下来，我需要回忆React中处理HTTP请求的常见做法。通常，用户可能会在登录后将token存储在本地存储（localStorage）或者sessionStorage中，也可能使用状态管理工具如Redux或Context API来全局管理token。然后在每次发送请求时，从存储中取出token并添加到请求头中。 对于不同的HTTP库，设置header的方式有所不同。比如，使用原生fetch时，需要在请求的headers选项中添加Authorization字段；而使用Axios的话，可以通过默认配置或者拦截器来统一设置，这样更高效，避免重复代码。 用户可能还会关心如何确保token的安全性，比如使用HttpOnly cookies，但这里主要是前端设置，所以可能不涉及。另外，可能需要处理token过期的情况，但用户的问题集中在设置方式上，暂时不需要深入探讨刷新token的逻辑。 同时，要考虑到用户可能是新手，需要给出具体的代码示例，分步骤说明。例如，首先如何存储token，然后在请求中如何添加。可能需要区分在单个请求中设置和全局设置的不同方法，以及使用自定义hook或高阶组件来封装请求逻辑。 还要注意提醒用户不要在前端代码中硬编码敏感信息，确保token的安全存储和传输，避免XSS攻击等安全问题。可能需要提到使用环境变量或者后端的安全措施来配合。 最后，总结几种常见的方法，并给出最佳实践建议，比如推荐使用Axios拦截器来统一管理请求头，保持代码整洁和可维护性。同时，提供示例代码和注意事项，帮助用户正确实现功能。</think>在 React 中设置 HTTP 请求头的 Token，主要有以下 4 种典型实现方式，具体可根据项目需求选择： --- ### 一、原生 fetch API 设置 ```javascript fetch('/api/data', { method: 'GET', headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}`, 'Content-Type': 'application/json' } }) ``` --- ### 二、Axios 实例配置（推荐） ```javascript // 1. 创建 axios 实例 const api = axios.create({ baseURL: 'https://api.example.com' }); // 2. 设置请求拦截器统一添加 Token api.interceptors.request.use(config => { const token = localStorage.getItem('token'); if (token) { config.headers.Authorization = `Bearer ${token}`; } return config; }); ``` --- ### 三、自定义 Hook 封装 ```javascript // 创建 useApi.js import axios from 'axios'; export default function useApi() { const api = axios.create(); api.interceptors.request.use(config => { const token = localStorage.getItem('token'); config.headers.Authorization = token ? `Bearer ${token}` : ''; return config; }); return api; } // 组件中使用 const api = useApi(); api.get('/user'); ``` --- ### 四、单次请求覆盖配置 ```javascript // 适用于需要临时修改 header 的场景 axios.get('/api/data', { headers: { 'Authorization': `Bearer ${token}`, 'X-Custom-Header': 'value' } }) ``` --- ### 最佳实践建议 1. **Token 存储** - 优先使用 `HttpOnly` Cookie（需配合后端设置） - 次选方案：`localStorage` 或 `sessionStorage` 2. **安全规范** - 始终使用 HTTPS - Token 前缀建议采用 `Bearer` 规范 - 敏感接口需要添加 CSRF 保护 3. **错误处理** ```javascript axios.interceptors.response.use( response => response, error => { if (error.response.status === 401) { // 处理 Token 过期逻辑 } return Promise.reject(error); } ); ``` --- ### 完整工作流程示例 ```javascript // 登录后存储 Token const handleLogin = async (credentials) => { const res = await axios.post('/auth/login', credentials); localStorage.setItem('token', res.data.token); } // 封装带 Token 的请求 const fetchUserData = async () => { try { const res = await api.get('/user'); // 使用预配置的 axios 实例 return res.data; } catch (err) { console.error('请求失败:', err); throw err; } } ``` --- ### 注意事项 1. 避免在客户端代码明文存储敏感信息 2. 服务端需配置 CORS 白名单： ```text Access-Control-Allow-Headers: Authorization ``` 3. 对于 SSR 项目（如 Next.js），需区分客户端和服务端环境处理 Token 根据具体场景选择实现方式，中小型项目推荐使用 **Axios 拦截器方案**，大型项目建议结合 **自定义 Hook + 状态管理** 实现集中式管理。