axios 请求改变请求头

本文介绍如何在使用axios发起GET请求时,通过请求头传递参数如token和语言设置。示例代码展示了如何设置headers属性来携带自定义请求头。

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

 如何携带请求头传参呢?

this.axios({
  url: 'https://www.baidu.com/' // 请求的 url 地址
  method: 'get', // 请求方式
  data: data, // 传递的参数
  headers: {
    token: 'awregtiy7qo2fru8q9udeu78osi98fpuj0qi348ufc0O', // 例如token
    lang: 'zh-cn' // 例如语言
  }
}).then((res)=>{
    // 请求成功之后执行的内容
})

 

### Axios 请求头常见问题及解决方法 #### 设置全局默认请求头 为了简化每次发送请求时设置相同的头部信息,在初始化应用时可以通过 `axios.defaults.headers` 来设定全局默认的请求头。这有助于减少重复代码并保持一致性[^3]。 ```javascript import axios from 'axios'; // 添加公共请求头 axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; axios.defaults.headers.post['Content-Type'] = 'application/json'; ``` #### 动态修改单次请求的Header 对于某些特定场景下需要临时改变请求头的情况,可以在发起请求时通过传递配置对象来覆盖默认值。这种方式提供了更大的灵活性[^4]。 ```javascript axios({ method: 'get', url: '/user/12345', headers: { 'Authorization': 'Bearer NEW-TOKEN' } }) .then(function (response) { console.log(response); }); ``` #### 解决跨域资源共享(CORS)中的预检请求失败 当浏览器执行CORS请求前会先发出OPTIONS请求作为预飞行检查(Preflight Request),服务器端需正确响应此请求才能继续实际的数据交互过程。确保服务端允许来自客户端域名的访问权限,并适当放宽HTTP动词限制[^1]。 ```http Access-Control-Allow-Origin: * Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS Access-Control-Allow-Headers: Content-Type, Authorization ``` #### 处理复杂认证机制下的Token刷新逻辑 在长时间运行的应用程序中,token可能过期失效。此时应该捕获相应错误状态码(如401 Unauthorized),自动触发token更新流程后再重试原操作[^2]。 ```javascript const instance = axios.create(); instance.interceptors.response.use(null, async function(error){ const originalRequest = error.config; if(error.response.status === 401 && !originalRequest._retry){ originalRequest._retry = true; try{ await refreshAccessToken(); return instance(originalRequest); } catch(e){ throw e; } } return Promise.reject(error); }); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值