uni-app中uni.request接口无法自定义添加header头部

uni-app中uni.request接口无法自定义添加header头部

详细问题描述

由于我后台用的是Authorization Bearer的方法验证用户token

所以：

在使用uni-app的 uni.request的接口时，在header里面加了一项:
‘Authorization’: ‘Bearer dqIMP68TSJKWFduU68siKmPPPlq5xfhJ’

结果在后台打印header头的时候，发现，只有key Authorization 传送到后台了， 而key对应的value没有被传送到后台， 后台没有验证成功，所以报401错误，前台chrome 既报401错误，又报跨域错误

我用postman试了一下，是可以被正常传送到后台的， 并且可以被后台相关代码检测到key, 并且成功实现了token验证业务。

[内容]

重现步骤

[步骤]
使用uni.request 的header参数， 然后发送后台

[结果]
结果header里面自定义的key:value，key全部被添加到header当中的一个叫access-controller-request-hader项中了

并且value也不见了

[期望]
本来我在uni.request接口的header中添加一个比如： Authorization ， 应该出现在header当中, 而不是添加到header当中的
access-controller-request-hader中去， 并且value也不见了

[如果语言难以表述清晰，拍一个视频或截图，有图有真相]

附件有真图

Image from CDN

Image from CDN

下面是postman的

Image from CDN

Image from CDN

Image from CDN

以下是以命令行的方式请求的：

Image from CDN


更多关于uni-app中uni.request接口无法自定义添加header头部的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

非bug，需要补充前端基础知识 百度：options

更多关于uni-app中uni.request接口无法自定义添加header头部的实战教程也可以访问 https://www.itying.com/category-93-b0.html


感谢回复，问题已解决

这个问题是由于跨域请求(CORS)导致的。当浏览器发起跨域请求时，会先发送一个OPTIONS预检请求，检查服务器是否允许实际请求。

对于Authorization这样的自定义header，需要服务器端明确配置允许：

  1. 在服务器端设置Access-Control-Allow-Headers包含"Authorization"
  2. 设置Access-Control-Allow-Credentials为true
  3. 确保Access-Control-Allow-Origin不是通配符"*"

解决方案：

  1. 后端需要正确配置CORS响应头：
Access-Control-Allow-Headers: Authorization
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: 具体域名(不能是*)
  1. uni-app端确保请求配置正确：
uni.request({
  url: 'your_api_url',
  header: {
    'Authorization': 'Bearer your_token'
  },
  method: 'POST', // 根据实际情况
  success: (res) => {
    console.log(res);
  }
});
回到顶部