首页 » JavaScript » vue2+、vuex、axios开发中遇到的坑点

vue2+、vuex、axios开发中遇到的坑点

原文 http://blog.csdn.net/hustxiaoxian/article/details/76092336

2017-07-25 20:20:02阅读(668)

一、axios.get、axios.post传输到后端的数据,后端接收不到。

在开发过程中,发现前端发送给后端的数据,后端接收不到,通过$GET['key']、$POST['key']都接收不到。

通过调试发现,在Headers中,有如下描述。

vue2+、vuex、axios开发中遇到的坑点

似乎,Request请求中,将请求的参数(object)当成了一个整体字符串发送给后端了。后端无法通过key索引到了。

我们在来看Request Headers中的请求参数如下:

vue2+、vuex、axios开发中遇到的坑点vue2+、vuex、axios开发中遇到的坑点

通过查询各种资料,我们发现,在axios中,Request应该设置为:Using application/x-www-form-urlencoded format。

我们有很多方式去改变。axios发送post请求,springMVC接收不到数据问题


不过,我最后没有使用上面链接中的方法,但是上面链接中提供去查询问题的思维方式值得借鉴。(不要遇到问题,就觉得是后端问题。)

我最后的解决方式是使用qs模块stringify,来格式化,如下所示:

const qs = require('qs');
function toUnderScore(s) {
    s = s.replace(/([A-Z])/g, '_$1').toLowerCase();
    return s;
}
// 格式化请求的参数
// Using application/x-www-form-urlencoded format NOT application/json
// 转 为Form Data
// https://github.com/mzabriskie/axios#using-applicationx-www-form-urlencoded-format
utils.stringify = function(params) {
    // 过滤请求参数,小驼峰转为下划线
    let data = {};
    for (let key in params) {
        let value = params[key];
        data[toUnderScore(key)] = value;
    }
    return qs.stringify(data);
}
改变之后,Request Payload 变成了Form Data

最新发布

CentOS专题

关于本站

5ibc.net旗下博客站精品博文小部分原创、大部分从互联网收集整理。尊重作者版权、传播精品博文,让更多编程爱好者知晓!

小提示

按 Ctrl+D 键,
把本文加入收藏夹