Vue中使用Axios进行POST数据发生的参数问题和跨域问题

Question

我在一个Vue的组件中定义了一个模拟的登录请求。我提前将登录的用户名与密码定义在了data下的userinfo中。

以下是定义的代码片段：

import axios from 'axios'
export default {
    name:'MainViews',
    data () {
        return {
            userinfo:{
                username:'admin',
                password:'wt_adam110'
            }
        }
    },
    created () {
        this._getuser ()
    },
    methods: {
        _getuser () {
            axios({
                method: 'post',
                url: '/apis/jxue/a/login',
                data: postData,
                headers: {
                    'Content-Type':'application/x-www-form-urlencoded'
                }
            }).then((res)=>{
                console.log(res);
            })
        }
    }
}

完成以上模拟之后，在控制台上给我打出来了结果：

这个结果提示是：用户名密码错误。（我模拟中的数据是正确的用户名和密码）

---

然后经过我的问题查询之后，说是我POST的数据也许没有序列化，后台可能是无法识别。根据网上大部分的解决方案，是用过Qs.stringfy()这个方法进行一下小改动。

然后我就安装了npm install qs --save。
并且在当前的文件中 import qs from 'qs' ，对局部代码进行了修改：

_getuser () {
    let postData = {username:'admin',password:'wt_adam110'} //这条语句是我怕我下面的写法不正确，单独写了个简单的变量。但是发现还是不好用。
    axios({
        method: 'post',
        url: '/apis/jxue/a/login',
        data: qs.stringify(this.userinfo),// 主要是这里
        headers: {
            'Content-Type':'application/x-www-form-urlencoded'
        }
    }).then((res)=>{
        console.log(res);
    })
}

这时再刷新页面，给我返回的结果是：

跨域问题的报错

在config/index.js中，我已经做了跨域处理。(我接口的服务器在我局域网中的另一台机器上。)

proxyTable: {
      '/apis': {
        target: 'http://192.168.31.177:8080', // 接口的域名
        // secure: true,  // 如果是https接口，需要配置这个参数
        changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
        pathRewrite: {
          '^/apis': '' // 重写数据路径配置
        }
      }
    }

整个情况就是这样，我有2个问题：

1. 为什么我POST的数据无法返回正常的数据，是我请求时数据就有问题么？怎么解决？
2. 为什么在我更改POST参数的格式后，又产生了跨域问题？

Answer 1

1. 关于数据错误的问题。数据错误是由于axios的post方法和jQuery带的参数在HTTP请求里的位置不一样，这就导致了一些服务器解析不到你请求中带上的参数就报错了；
2. qs并不是在data里使用的，正确的方法应该是

axios({
    url: yourUrl,
    data:data,
    method: 'POST',
    transformRequest:[function(data){
        return qs.stringify(data)
    }]
})

Answer 2

1.你在header了加了'Content-Type':'application/x-www-form-urlencoded'说明你提交的数据类型是form格式的，但是你第一次提交的时候是一个对象的格式
2.一般提交的格式json格式，用JSON.stringify(data)转换 一下，这个你需要和后端确定
3.跨域的问题可能是你的proxytable没生效，看看你浏览器里访问的接口的完整地址是啥