Http请求在Request headers增加参数后台获取不到问题

在服务器上,由于使用nginx代理转发,遇到一个问题是:请求headers中的access_token参数因为包含下划线,导致后台无法获取。解决办法是修改参数名或调整nginx配置,启用'underscores_in_headers'选项。博主通过打印headers值展示了问题的排查过程。

Request headers增加参数,直接访问可以获取到,部署到服务器获取不到的原因

参数

access_token:"ddddd";

由于服务器是通过nginx代理转发的,它不认下划线,所以通过nginx代理后后台获取不到

改变参数名或者nginx增加配置

underscores_in_headers on

打印headers的值

 public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
                  //根据投信息的key获得值
              String headVal = request.getHeader("Host");
              System.out.println("Host:" + headVal);
              // Host:localhost:8080
             
              //通过getHeaderNames获得所有头名字的Enumeration集合
              Enumeration<String> headNames = request.getHeaderNames();
              while(headNames.hasMoreElements()){
                     String headName = headNames.nextElement();
                     System.out.println(headName+":"+request.getHeader(headName));
    }
 }

### 常见原因分析 在使用 Axios 发送 POST 请求时,如果后台无法接收到参数,通常可能由以下几个方面的原因引起: 1. **Content-Type 不匹配** 如果前端设置的 `Content-Type` 和后端解析器不一致,则可能导致后端无法正确解析请求体中的数据。例如,Axios 默认会将 POST 数据作为 JSON 格式的 `Request Payload` 发送,而某些后端框架(如 Java 的 Spring Boot)默认期望的是表单格式的数据 (`application/x-www-form-urlencoded`)。 2. **数据格式错误** Axios 默认发送的对象会被序列化为 JSON 字符串。然而,部分后端仅支持接收 URL 编码形式的键值对数据。因此,当数据以 JSON 形式传递时,可能会被忽略。 3. **缺少必要的依赖库** 在需要转换数据格式的情况下,如果没有引入合适的工具库(如 `qs`),则难以实现从对象到 URL 编码字符串的转化[^2]。 --- ### 解决方案 以下是针对上述问题的具体解决方法: #### 方法一:使用 `qs` 库进行数据序列化 通过安装并配置 `qs` 库,可以轻松地将 JavaScript 对象转化为 URL 编码的形式。具体操作如下: ```javascript // 安装 qs 库 npm install qs --save import axios from 'axios'; import qs from 'qs'; let postData = { certificationAccount: 'example', balance: 100 }; axios.post('/api/endpoint', qs.stringify(postData), { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).then(response => { console.log(response.data); }); ``` 此方法适用于大多数场景,并能有效兼容不同类型的后端接口需求[^4]。 #### 方法二:手动拼接查询字符串 如果不希望额外增加第三方依赖项,也可以采用手动生成 URL 参数的方式完成相同功能: ```javascript function toQueryString(obj) { const paramsArray = []; Object.keys(obj).forEach(key => { if (obj[key]) { paramsArray.push(`${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`); } }); return paramsArray.join('&'); } const postData = { username: 'testUser', password: 'password' }; axios({ method: 'post', url: '/login', data: toQueryString(postData), headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }) .then(res => console.log(res)) .catch(err => console.error(err)); ``` 这种方法虽然简单易懂,但对于复杂结构的数据处理起来较为繁琐[^3]。 #### 方法三:调整 Content-Type 为 application/json 对于那些能够接受 JSON 输入的服务来说,只需确保设置了正确的头部信息即可正常工作: ```javascript axios.post('/submit', { key1: value1 }, { headers: {'content-type': 'application/json'} }).then((response)=>{ console.log('Success:', response.status); }).catch((error)=>{ console.log('Error:', error.message); }); ``` 注意这里不再需要任何特殊编码过程,因为目标 API 已经明确声明它偏好这种媒介类型[^1]。 --- ### 总结 综上所述,在遇到 Vue 中利用 Axios 执行 Post 操作却得不到预期响应的情况时,应优先考虑是否存在以上提到的内容类型差异或者传输机制上的偏差等问题;然后依据实际情况选取恰当的技术手段予以修正。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值