uniapp学习日记之request自定义请求头
在学习uniapp的过程中，由于笔者是从Vue项目转来学习uniapp，在使用uni.request时，发现在浏览器调试时，无法在请求头header中添加token字段，愤而弃之，便开始使用axios组件，事后细想后重读官网资料，发现了问题，并非request无法在请求头中自定义字段，而是笔者操作不当。
1、意外发现
当笔者细读OBJECT参数说明文档时，才发现犯了一个错误。处于个人习惯，喜欢在浏览器端调试程序，浏览器端属于是H5环境，自然也是无法修改header中的参数的，为了确定笔者的想法，于是乎决定做个对比。
uni.request(OBJECT) | uni-app官网
2、编写测试页面
笔者这里只给出uniapp的代码，服务端创建一个SpringBoot项目并写一个过滤器获取请求头参数即可实现，这里就不再赘述。
<template>
<view>
<button type="primary" @click="request()">测试发送请求</button>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
request() {
uni.request({
url: 'http://127.0.0.1:7088/uniapp/test/token',
data: {
text: 'uni.request'
},
header: {
myToken: 'mytoken-uniapp',
},
success: (res) => {
console.log(res.data);
this.text = 'request success';
}
});
}
}
}
</script>
页面样式
3、比较结果
1、浏览器端调试
package org.apache.coyote;
public final class Request {}
在Request类中打上断点，可以看到Header中的所有参数，复现了当初放弃使用request时的状况。
这里只看到了 access-control-request-method和access-control-request-headers字段，以及代码中自定义的key值作为access-control-request-headers字段的value值。
2、HBuilder内置浏览器调试
那么在HBuilder内置浏览器调试会出现什么情况呢？
从结果可以看到 headers中没有了 access-control-request-method和access-control-request-headers字段，而多出了代码自定义的字段。
这才是笔者想要的那种情况，也就是说uni.request支持自定义请求头字段，只是在H5调试环境下不支持，正常使用uniapp进行开发任务时，都是为了开发app或者小程序，自然也就不会出现H5环境而导致自定义请求头字段失效的情况。
4、总结
项目转型太匆忙，而面对新的框架容易囫囵吞枣，导致遗漏了诸多细节，导致在其他地方费了好大一番功夫，本次得到的经验是：在学习一个框架时，多花一些时间去看去想，而不是匆忙上手。
