【vue】element、vue2.0+、vuex、axios开发中遇到的坑点

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

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

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

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

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

通过查询各种资料，我们发现，在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

二、开发模式下的跨域问题的解决。

在config/index.js的代码中添加如下代码。

proxyTable: {
            '/main': {
                target: 'https://****.****.***/main',
                changeOrigin: true,
                secure: false,
                pathRewrite: {
                    '^/main': ''
                }
            }
        }

当请求的路径是 http://localhost:8800/main/?ct=user&ac=getUserInfo，路径中含有main这个path时，上面的代理设置会重定向到

https://****.****.***/main/?ct=user&ac=getUserInfo。

我们在浏览器中看到的请求链接还是http://localhost:8800/main/?ct=user&ac=getUserInfo。实际上底层又去转发请求https://****.****.***/main/?ct=user&ac=getUserInfo了。

具体相关的说明，可以参考：Vue-cli proxyTable 解决开发环境的跨域问题