今天终于解决了一个困扰很久的问题，在使用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中，所以不管你采用什么样的语言写后台，这个问题总是可以在后台解决的。

 

 

欢迎我的微信公众号【前端栈无不胜】

会定期推送Js、Vue、React、Node、算法、面试等大前端技术博客、精选文章！