[JavaScript知识库]vue配置axios 和npm代理转发时遇到的坑

一、请求方式错误的坑

? ? 1.问题复现

? ? 登录时，肯定是post请求带着用户名和密码去登陆，但在页面检查代码时，却发现请求方式是get方式。

这是我的配置

let base='';
export const KeyValuePostRequest=(url,params)=>{
    return axios({
        methods:'post',
        url:`${base}${url}`,
        data:params,
        transformRequest:[function (data){
            let ret ='';
            for (let i in data){
                ret += encodeURIComponent(i) + '=' + encodeURIComponent(data[i]) + '&';
            }
            return ret;
        }],
        headers:{
            'Content-Type':'application/x-www-form-urlencoded'
        }
    })
};

这是结果：

2.解决方式 是把代码中的??methods 改成?method即可

二、路由一直无法转发到服务端

1..问题复现?

请求方的ip和地址都是对的，但是就是无法转到服务端去掉接口

这是配置

let proxyObj ={};
proxyObj['/']={
    ws:false,
    target:'http://localhost:8081',
    changeOrigin:true,
    pathRewrite:{
        '`/':''
    }
}
module.export={
    devServer:{
        host:'localhost',
        port:8080,
        proxy:proxyObj
    }
}

这是结果

解决办法：?module.export 改成?module.exports

三、请求参数json格式转key-value格式错误

1.问题复现

如{"username":"xiaoxu","password":"123456"} 转成key-value请求格式应该是 username=xiaoxu&password=123456的样子 但是却转成了?username=xiaoxu&password=123456& 导致一直登陆失败

这是代码

let base='';
export const KeyValuePostRequest=(url,params)=>{
    return axios({
        method:'post',
        url:`${base}${url}`,
        data:params,
        transformRequest:[function (data){
            let ret ='';
            for (let i in data){
                ret += encodeURIComponent(i) + '=' + encodeURIComponent(data[i]) + '&';
            }
            return ret;
        }],
        headers:{
            'Content-TYpe':'application/x-www-form-urlencoded'
        }
    })
};

这是结果：

?解决办法：

Content-TYpe 改成?Content-Type

总结：这些都是书写不认真造成的，开发工具也都是显示同样颜色，故而不好排查，如果有小伙伴书写类似功能的话，不妨试试博主的代码，亲测可以。