前端axios发送请求,在请求头添加参数

1.在封装接口传参时,定义形参,params是正常传参,name则是我想要在请求头传参

复制代码
export function getCurlList (params, name) {
  return request({
    url: '********',
    method: 'get',
    params,
    name
  })
}

2.接口调用

复制代码
 const res = await getCurlList(params,searchData.value.name)

3.在请求拦截器拦截,做处理(这里记住加一个判断,有name的值话才会加在请求头里,避免影响其他接口)

复制代码
Axios.interceptors.request.use(config=> {
    // 请求拦截处理
    if (config.name) {
        config.headers['UserName'] = config.name
    }
    return config
}, err => {
    return Promise.reject(err)
})

成功发起发起之后,可以在控制台查看一下,有下边的效果就加上了,

注意:这里修改请求头的信息,会有跨域的问题,需要后端配置信息

相关推荐
英俊潇洒美少年1 小时前
React 最核心 3 大底层原理:Fiber + Diff + 事件系统
前端·react.js·前端框架
我命由我123451 小时前
React Router 6 - 概述、基础路由、重定向、NavLink、路由表
前端·javascript·react.js·前端框架·ecmascript·html5·js
LJianK11 小时前
java封装
java·前端·数据库
yaaakaaang1 小时前
(四)前端,如此简单!---Promise
前端·javascript
GISer_Jing2 小时前
ReAct规划原理实战指南
前端·react.js·ai·aigc
SoaringHeart2 小时前
Flutter组件封装:翻转组件 NFlipCard
前端·flutter
LlNingyu2 小时前
文艺复兴,什么是XSS,常见形式(一)
前端·安全·web安全·xss
dleei3 小时前
彻底淘汰老旧 SVG 插件:unplugin-icons 与 Tailwind CSS v4 自定义图标最佳实践
前端·程序员·前端框架
LlNingyu4 小时前
文艺复兴,什么是XSS,常见形式(二)
前端·安全·xss
明君879974 小时前
说说我为什么放弃使用 GetX,转而使用 flutter_bloc + GetIt
前端·flutter