原生xhr请求加token
时间: 2025-03-14 12:15:43 浏览: 29
### 如何在原生 XMLHttpRequest (XHR) 请求中加入 Token 实现授权认证
为了实现通过 `XMLHttpRequest` 添加 Token 来完成身份验证,可以在发送请求之前设置 HTTP 头部字段中的 `Authorization` 属性。以下是具体的方法:
#### 设置 Authorization Header
当创建并打开一个 XHR 对象之后,在调用 `.send()` 方法之前,可以使用 `.setRequestHeader(key, value)` 方法来定义自定义头部信息。对于身份验证而言,通常会将 Bearer Token 放置到 `Authorization` 字段下。
```javascript
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://example.com/api/data", true);
// 定义 token 值
var token = "your-access-token-here";
// 使用 setRequestHeader 方法添加 authorization header
xhr.setRequestHeader('Authorization', 'Bearer ' + token);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.send();
```
上述代码片段展示了如何向服务器发起 GET 请求的同时传递访问令牌作为身份验证的一部分[^2]。
需要注意的是,确保每次请求都正确设置了相应的 token,并妥善管理这些敏感数据的安全存储与传输过程。
此外,如果项目中有多个地方需要用到类似的逻辑,则考虑封装此功能成通用函数或者类以便重用和维护更加方便高效。
---
### 关于 fetch API 和 vue-resource 的对比补充说明
虽然现代开发更倾向于采用 Fetch API 或 Axios 替代传统 XHR 方式来进行网络交互操作,但是理解原始方式仍然具有重要意义因为它构成了其他更高层次库的基础原理之一。相比之下,Fetch 提供了一个更为简洁明了的接口用于执行同样的任务;而像 Vue Resource 这样的框架特定工具则进一步简化了流程并且集成了额外特性例如拦截器机制等[^3]。
尽管如此,在实际应用当中无论选用哪种技术方案都需要遵循最佳实践原则——即始终保护好用户的隐私资料不被泄露出去!
---
阅读全文
相关推荐


















