uni-app自定义请求头 uni-app uni.request如何设置header-uni-app-PHP中文网

uni.request 设置 header 应直接在 header 选项传纯对象，键名用标准大写格式（如 Authorization），值为字符串；需注意 H5 跨域预检、小程序 x- 前缀限制及跨平台拦截器自封装。

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 }
  })
}