移动端 vConsole 踩坑记录

移动端 vConsole 踩坑记录

由于我们的请求是需要在请求头中添加 access-token 参数用来身份验证的
为了方便大家知道我在说什么我写了个例子：

//身份信息，加密后的 类似于“eyJleHAiOjE2NDg3MTM1OTEsInVzZXJuYW1lIjoibWFvZGV6aHUifQ”
var token = ""
// key 也可以叫属性名
var tokenName = "X-Access-Token";

//初始化自动登录
(function (){
    $.ajax({
        type: "post",
        url: "/user/login",
        datatype: "json",
        contentType: "text/plain;charset=UTF-8",
        success: function(res) {
            if (res && res.success){
                token=res.result.token;
            }
        },
        error: function(xhr, errorType, error) {
           alert("登录失败")
        }
    });
})()


/**
 * 登录成功后获取用户信息列表，由于需要登录成功后的身份令牌，需要在headers中加上
 */
function getInfo() {
    let headers = {};
    headers[tokenName] = token;
    $.ajax({
        type: "get",
        url: "/user/test",
        datatype: "json",
        headers: headers,
        success: function (res) {
            //正常这里身份信息带到后台验证成功后返回需要的数据的
            if (res.success) {
                console.log(res.result)
            }
        },
        error: function (res) {
            //写对象时用，拼接，如果用+会执行运算导致输出object，不信可以到控制台试下
            console.log("获取失败,res:",res)
        }
    });
}

上面代码正常情况下执行是没有问题的，但是当你页面引入了 “vConsole”

  <script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>
    <script>
        // 放开下面注释会在界面右下角看到  vconsole 按钮，但是注意！！！！！！！！！ $ajax请求中部分参数会被重刷掉，例：header中的 X-Access-Token
        var vConsole = new window.VConsole();
    </script>

你会发现你的 ajax 请求中自定义携带的参数都没有了，哪怕你写成这样，都看不到一个参数

$.ajax({
        type: "get",
        url: "/user/test",
        datatype: "json",
        headers: {"a":"aaaaaaaaaaaaaaaaaaaaaa","name":"张三三三三三三三三三三三三三三"},
        success: function (res) {
            
        }
    });

总结：vConsole 中会把请求中的自定义的 headers 信息清空，上面踩坑记录为 $.ajax 调用，其它请求方式也可了解，避免出现上述问题，真的太坑了，排查了大半天。