今天終於解決了一個困擾很久的問題，在使用Vue進行前端專案的搭建時，通常採用axios作為資料傳輸的工具，我們會發現，使用get請求一切都正常，但是使用post請求，會發生一些奇怪的事情。這次我使用的是python的web框架django，但道理都是一樣的，我們可以通過修改前端來處理，也可以通過修改後端來處理。

一、我們先用GET方法寫一個小小的登陸請求：

下面是Vue前端的程式碼

loginsubmit(){
    console.log(this.UserName+this.UserPwd);
    axios.get("http://localhost:8000/baseapi/login",{
        params:{
            userid:"zhonghangAlex",
            password:"woaini123"
        }
    }).then((response)=>{
        let res = response.data;
        console.log(res);
        this.$router.push('/user/userindex')
    });
}
 

結果發現請求是正常的：

後臺的介面是這樣的：

def login(request):
    if request.method == 'POST':
        return HttpResponse('{"status":"0","message":"請使用GET請求","result":"null"}')
    elif request.method == 'GET':
        req_userid = request.GET.get('userid')
        req_password = request.GET.get('password')
        if req_userid and req_password:
            try:
                login_obj = models.T_user_info.objects.filter(userid = req_userid,password = req_password).first()
            except:
                return HttpResponse('{"status":"0","message":"使用者名稱或密碼錯誤","result":"null"}')
            else:
                request.session['userid'] = login_obj.userid
                request.session['power'] = login_obj.power
                return HttpResponse('{"status":"1","message":"登陸成功","result":{"power":"'+str(login_obj.power)+'"}}')
        else:
            HttpResponse('{"status":"0","message":"輸入有誤，請重新輸入","result":"null"}')
 

後臺可以獲取get請求的鍵值對，簡單而言：

?userid=zhonghangAlex&password=woaini123這樣的欄位傳送過去，後端進行鍵值對獲取，下面是後臺獲取資料的核心程式碼

req_userid = request.GET.get('userid')
req_password = request.GET.get('password')

一切都很正常，但是登陸的請求為了保障安全性，應該採用post，這個時候我們再看看會發生什麼？

二、使用POST方法寫一個登陸請求：

下面是Vue前端的程式碼：

loginsubmit(){
   console.log(this.UserName+this.UserPwd);
   axios.post("http://localhost:8000/baseapi/login",{
       userid:"zhonghangAlex",
       password:"woaini123"
   }).then((response)=>{
       let res = response.data;
       console.log(res);
       this.$router.push('/user/userindex')
   });

}
 

結果這個時候請求變成了這樣：

資料變成了類json進行傳輸而且資料請求的方式也發生了變化，上面變成了Request Payload

這個時候資料無法解析成?userid=zhonghangAlex&password=woaini123這樣的欄位，我們如果使用：

req_userid = request.POST.get('userid')
req_password = request.POST.get('password')

這樣的後臺資料獲取方式，就會發生異常，那麼應該如何處理呢？

三、兩種解決方案

（一）前端解決：

使用URLSearchParams傳遞引數，網上大多數都是這樣的方法：

import axios = import('axios');
let param = new URLSearchParams();
param.append("userid", "zhonghangAlex");
param.append("password", "woaini123");

axios.post('xxxxx', param).then(.....)

       果然我們傳遞的引數就正常了，後臺可以獲取到相應的鍵值對，但是使用這樣的方法有兩點壞處，第一個是前端請求每一個欄位都append會很麻煩，第二個就是這個物件它不相容IE和Edge甚至在360瀏覽器都會掛掉，我曾經嘗試過IE11版本都不行，提示這個物件缺失。所以我們最好的辦法就是在後端做一個處理！

（二）後端解決

      經過查閱大量的資料，我發現，正如我前面說過的，get請求傳送的是很標準的鍵值對，資料可以被後端解析，那為什麼後端不能解析json格式的post資料呢？按照這個思路我研究了下request的api，發現這個json是封裝到body中的，所以，在後端的呼叫應該使用body物件。話不多說，直接上程式碼：

def login(request):
    if request.method == 'GET':
        return HttpResponse('{"status":"0","message":"請使用post請求","result":"null"}')
    elif request.method == 'POST':
        req = json.loads(request.body)
        req_userid = req['userid']
        req_password = req['password']
        if req_userid and req_password:
            try:
                login_obj = models.T_user_info.objects.filter(userid = req_userid,password = req_password).first()
            except:
                return HttpResponse('{"status":"0","message":"使用者名稱或密碼錯誤","result":"null"}')
            else:
                request.session['userid'] = login_obj.userid
                request.session['power'] = login_obj.power
                return HttpResponse('{"status":"1","message":"登陸成功","result":{"power":"'+str(login_obj.power)+'"}}')
        else:
            HttpResponse('{"status":"0","message":"輸入有誤，請重新輸入","result":"null"}')

這就是後端處理的辦法，核心的程式碼是：

req = json.loads(request.body)
req_userid = req['userid']
req_password = req['password']

這樣req_userid和req_password就分別儲存了前端發來的資料。

在前端時間我使用node的時候也是一樣的，post請求的資料會封裝到request的body中，所以不管你採用什麼樣的語言寫後臺，這個問題總是可以在後臺解決的。