axios设置请求头

在vue+ vant及elementui项目中,解决后端接口返回json为空的问题,需要在axios请求头中添加'X-Requested-With': 'XMLHttpRequest'。通过在service.interceptors.request.use中设置headers或修改axios.defaults.headers.common来实现。但在vue+ vant项目中使用axios.defaults.headers.common方式可能失败。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

背景:

请求后端数据时,接口返回json为空。与后端沟通发现,请求头中缺少

‘X-Requested-With’: ‘XMLHttpRequest’

解决:

1,vue+vant项目中

service.interceptors.request.use(
config => {
config.headers = { ‘X-Requested-With’: ‘XMLHttpRequest’ }
if (store.getters.token) {
config.headers[‘X-Token’] = getToken()
}
return config
},
error => {
return Promise.reject(error)
}
)

在请求中设置请求头:

config.headers = { 'X-Requested-With': 'XMLHttpRequest' }

2.vue+elementui

axios.defaults.headers.common[‘X-Requested-With’] = ‘XMLHttpRequest’
service.interceptors.request.use(
config => {
// do something before request is sent
return config
},
error => {
return Promise.reject(error)
}
)

在设置拦截器前加入

axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'

存疑:

当我在vue+vant项目中使用方法2,设置请求头失败

先自我介绍一下,小编13年上师交大毕业,曾经在小公司待过,去过华为OPPO等大厂,18年进入阿里,直到现在。深知大多数初中级java工程师,想要升技能,往往是需要自己摸索成长或是报班学习,但对于培训机构动则近万元的学费,着实压力不小。自己不成体系的自学效率很低又漫长,而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家,初衷也很简单,就是希望帮助到想自学又不知道该从何学起的朋友,同时减轻大家的负担。添加下方名片,即可获取全套学习资料哦

### 如何在 Axios 中配置和使用请求头 #### 1. 设置全局默认请求头 可以通过 `axios.defaults` 来设置全局的默认请求头。这样所有的 HTTP 请求都会自动带上这些头部信息。 ```javascript // 设置全局默认请求头 axios.defaults.headers.common['Authorization'] = 'Bearer your_token_here'; axios.defaults.headers.post['Content-Type'] = 'application/json'; // 针对POST请求单独设置 ``` 上述代码设置了两个常见的请求头:一个是通用的 `Authorization` 头部,另一个是针对 POST 方法的 `Content-Type`[^5]。 --- #### 2. 使用实例级别的请求头 当需要为特定的 Axios 实例设置不同的请求头时,可以利用 `axios.create()` 创建一个新的 Axios 实例,并为其指定独立的配置。 ```javascript const instance = axios.create({ baseURL: 'https://api.example.com', timeout: 1000, headers: { Authorization: 'Bearer another_token_here', // 自定义 token 'Custom-Header': 'custom_value' // 添加其他自定义头部 } }); instance.get('/endpoint').then(response => console.log(response.data)); ``` 通过这种方式,可以在不干扰全局配置的情况下实现更灵活的需求[^2]。 --- #### 3. 单次请求中的动态请求头 对于某些场景下需要临时更改请求头的情况,可以直接在每次请求中传入额外的配置参数。 ```javascript axios.get('https://api.example.com/data', { headers: { 'Authorization': 'Bearer one_time_token', // 动态设置 token 'Accept-Language': 'en-US' // 可选的语言偏好 } }).then(response => console.log(response.data)); ``` 这种方法适用于那些不需要长期保存或者仅需一次性使用的特殊头部字段[^1]。 --- #### 4. 利用拦截器管理复杂逻辑下的请求头 为了简化重复操作以及集中处理业务需求(比如鉴权),推荐借助 **请求拦截器** 完成复杂的请求头管理工作。 ```javascript axios.interceptors.request.use(config => { const token = localStorage.getItem('userToken'); // 获取存储于本地的 Token if (token) { config.headers.Authorization = `Bearer ${token}`; // 将 Token 注入到请求头中 } return config; }, error => Promise.reject(error)); ``` 此片段展示了如何捕获每一个即将发出的请求,在其中注入必要的认证令牌或其他元数据。 --- #### 5. Vue.js 环境下的集成与优化 如果是在基于 Vue 的前端应用里工作,则通常会结合插件机制完成更加优雅的设计模式: ```javascript import axios from 'axios'; export default { install(Vue, options) { Vue.prototype.$axios = axios; // 初始化时即挂载好基础配置 Vue.prototype.$axios.interceptors.request.use((config) => { let token = window.sessionStorage.getItem("authToken"); if(token){ config.headers["Authorization"] = "Bearer "+token; } return config; }); } } ``` 之后便能在组件内部轻松访问 `$axios` 对象及其预设功能[^3]。 --- #### 总结 无论是简单的静态声明还是高度定制化的解决方案,Axios 提供了丰富的工具集帮助开发者高效地管理和维护 API 调用过程中的各种细节问题。以上介绍了几种典型的方法用于调整或增强请求头的行为表现形式。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值