<p>uni.request 设置 header 应直接在 header 选项传纯对象,键名用标准大写格式(如 Authorization),值为字符串;需注意 H5 跨域预检、小程序 x- 前缀限制及跨平台拦截器自封装。</p>
uni.request 设置 header 的正确写法
直接在 uni.request 的 header 选项里传对象,不是改全局配置,也不是塞到 data 里。这个对象的 key 是 header 字段名(比如 authorization),value 是字符串值。
常见错误是把 header 写成数组、嵌套在其他字段下,或者用了驼峰命名(如 authorization)导致后端收不到——HTTP header 名不区分大小写但惯例全大写,uni-app 会原样透传,所以建议按服务端约定写,通常用 Authorization、Content-Type 这类标准写法。
-
header必须是 plain object,不能是Map或带原型的对象 - 值必须是字符串;传
number或null会被转成字符串(比如null→"null"),容易出错 - 如果需要动态 token,别在页面 data 里硬编码,优先从
uni.getStorageSync('token')拿,或走统一请求拦截器
uni.request({
url: 'https://api.example.com/user',
method: 'GET',
header: {
'Authorization': 'Bearer ' + uni.getStorageSync('token') || '',
'Content-Type': 'application/json'
},
success: res => console.log(res)
})
为什么有时 header 看似设置了却没发出去
最常踩的坑是跨域预检(OPTIONS 请求)——uni-app 在 H5 平台发带自定义 header 的请求时,浏览器会先发一次 OPTIONS 预检,而这个预检请求不带 header,且服务端必须明确返回 Access-Control-Allow-Headers 才允许后续真实请求携带该 header。
现象是:H5 上请求卡住、控制台报 CORS 错误、Network 面板里看不到你的 Authorization;但 App 和小程序正常。这不是 uni-app 的 bug,是浏览器机制。
- 检查服务端是否响应了
Access-Control-Allow-Headers: Authorization, Content-Type - 小程序和 App 不走 CORS,所以同样代码在这些平台能过,容易误判为“uni-app 有问题”
- 临时调试可加
dataType: 'text'避免预检(某些简单 header 组合不会触发),但不可依赖
uni-app 请求拦截器里统一加 header 怎么做
手动每个 uni.request 都写 header 很容易漏或写错,推荐用封装函数或拦截器。uni-app 没有内置拦截器 API,得自己包一层。
关键点:拦截器逻辑要放在发起请求前,且不能破坏原有 success/fail/complete 回调链;token 过期等场景需要异步处理(比如先刷新 token 再重发),这时不能简单 return 原始 uni.request 结果。
- 封装函数里默认 merge 用户传入的
header和公共 header,避免覆盖(比如用户想额外加X-Trace-ID) - 不要直接修改传入的
header对象,用{ ...defaultHeaders, ...userHeaders }安全合并 - App 和小程序支持
uni.addInterceptor,但 H5 不支持,所以跨平台拦截器必须自己实现,不能只靠addInterceptor
function request(options) {
const defaultHeaders = {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + (uni.getStorageSync('token') || '')
}
return uni.request({
...options,
header: { ...defaultHeaders, ...options.header }
})
}
小程序平台对 header 的特殊限制
微信小程序要求所有自定义 header 的 key 必须以 x- 开头(如 x-user-id),否则会被静默过滤。这是平台限制,uni-app 无法绕过。
也就是说,你在 header 里写 Authorization 或 Accept 是 OK 的(属于标准 header),但写 uid 或 version 就会被丢掉,必须改成 x-uid、x-version。
- 非标准 header 在小程序中必须带
x-前缀,否则发不出去,也不报错,极难排查 - App 和 H5 没这限制,所以同一套代码在小程序上 header 失效,大概率是这个原因
- 如果后端接口强制要求某个非
x-开头的自定义 header,只能让后端改成接受x-版本,或改用 query 参数临时过渡

















