浏览器发起请求时，如何在header 设置token

### 如何在浏览器HTTP请求头中添加或设置Token 要在浏览器中的HTTP请求头中添加或设置Token，可以通过多种方式实现。以下是几种常见的方法及其具体操作： #### 方法一：通过前端框架（如Axios）配置全局拦截器 可以利用 Axios 提供的请求拦截功能来自动为每次请求附加 Token。这种方式适用于基于 Vue 或 React 的项目。 ```javascript // 添加请求拦截器 axios.interceptors.request.use( function(config) { // 如果存在 token，则将其添加到每个请求的 header 中 if (sessionStorage.getItem("token")) { config.headers.common["Authorization"] = `Bearer ${sessionStorage.getItem("token")}`; } return config; }, function(error) { // 处理请求错误 return Promise.reject(error); } ); ``` 上述代码会在发送任何请求前检查是否有存储的 Token，并将其加入到请求头部[^2]。 #### 方法二：手动指定单次请求的 Header 配置 对于特定场景下的 POST 请求或其他类型的请求，可以直接在调用 API 时设定 Headers 参数。 ```javascript import axios from 'axios'; const postDataWithToken = async (url, data, token) => { try { const response = await axios.post(url, data, { headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}` } }); console.log(response.data); } catch (error) { console.error('Error during posting:', error); } }; // 使用示例 postDataWithToken('https://api.example.com/data', { key: 'value' }, 'your-auth-token'); ``` 此方法适合于仅需针对某些特殊接口传递认证信息的情况[^4]。 #### 方法三：直接修改 XMLHttpRequest 对象属性 如果不使用第三方库而依赖原生 JavaScript 实现网络通信的话，也可以直接调整 XHR 实例的相关选项。 ```javascript function sendRequestWithToken(method, url, body, token) { var xhr = new XMLHttpRequest(); xhr.open(method.toUpperCase(), url, true); // 设置必要的headers xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8'); xhr.setRequestHeader('Authorization', `Bearer ${token}`); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status >= 200 && xhr.status < 300) { console.log(JSON.parse(xhr.responseText)); } }; xhr.send(body ? JSON.stringify(body) : null); } sendRequestWithToken('GET', '/page/home', undefined, 'webapp_token_abc123'); ``` 这种方法展示了不借助额外工具的情况下如何向服务器提交带授权凭证的数据流[^1]。 #### 跨域问题注意事项 需要注意的是，在涉及跨源资源共享(CORS)的应用场合下，一旦尝试自定义 HTTP 请求头比如 Authorization ，则实际执行流程里会先触发一次 OPTIONS 类型的方法询问目标资源所在站点是否接受此类定制化连接形式。如果没有适当配置 CORS 政策，则可能导致预期之外的行为发生，例如被拒绝访问等问题出现[^3]。 --- ### 总结 综上所述，无论是采用现代化开发环境里的自动化解决方案还是回归基础层面的手动控制手段都可以有效地完成任务需求——即将安全令牌嵌入至客户端对外发起的所有数据交换过程中去。不过考虑到用户体验以及维护便利性的因素建议优先选用前者即集成现有成熟技术栈所提供的便捷特性来进行处理工作。