Vue中使用Axios進(jìn)行POST數(shù)據(jù)發(fā)生的參數(shù)問題和跨域問題

我在一個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);
            })
        }
    }
}

完成以上模擬之后，在控制臺上給我打出來了結(jié)果：

這個結(jié)果提示是：用戶名密碼錯誤。（我模擬中的數(shù)據(jù)是正確的用戶名和密碼）

然后經(jīng)過我的問題查詢之后，說是我POST的數(shù)據(jù)也許沒有序列化，后臺可能是無法識別。根據(jù)網(wǎng)上大部分的解決方案，是用過Qs.stringfy()這個方法進(jìn)行一下小改動。

然后我就安裝了npm install qs --save。
并且在當(dāng)前的文件中 import qs from 'qs' ，對局部代碼進(jìn)行了修改：

_getuser () {
    let postData = {username:'admin',password:'wt_adam110'} //這條語句是我怕我下面的寫法不正確，單獨寫了個簡單的變量。但是發(fā)現(xiàn)還是不好用。
    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);
    })
}

這時再刷新頁面，給我返回的結(jié)果是：

跨域問題的報錯

在config/index.js中，我已經(jīng)做了跨域處理。(我接口的服務(wù)器在我局域網(wǎng)中的另一臺機(jī)器上。)

proxyTable: {
      '/apis': {
        target: 'http://192.168.31.177:8080', // 接口的域名
        // secure: true,  // 如果是https接口，需要配置這個參數(shù)
        changeOrigin: true, // 如果接口跨域，需要進(jìn)行這個參數(shù)配置
        pathRewrite: {
          '^/apis': '' // 重寫數(shù)據(jù)路徑配置
        }
      }
    }

整個情況就是這樣，我有2個問題：

1. 為什么我POST的數(shù)據(jù)無法返回正常的數(shù)據(jù)，是我請求時數(shù)據(jù)就有問題么？怎么解決？
2. 為什么在我更改POST參數(shù)的格式后，又產(chǎn)生了跨域問題？