Vue-Element-Admin中使用request()方法POST数据格式为Request Payload的解决方案

Vue-Element-Admin中POST提交表单时数据格式为Request Payload

API接口使用post接受前端传来的数据操作数据库

由于数据格式是Request Payload导致无法接收到传过去的值

查看http请求数据
Request Payload使用的请求头
Content-Type: application/json;charset=UTF-8

对比其他项目中Form Data使用的请求头
Content-Type: application/x-www-form-urlencoded; charset=UTF-8

在这里插入图片描述

    headers: {
    
    
      'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
    }

向我们的接口中添加请求头配置

重新尝试接口

发现接口请求的数据还是有问题

在这里插入图片描述
因此我们要在向服务器发送数据前,对请求数据进行修改

这里使用到transformRequest配置信息
在这里插入图片描述

    transformRequest: [
      function(data) {
    
    
        var ret = ''
        for (var it in data) {
    
    
          ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
        }
        ret = ret.substring(0, ret.lastIndexOf('&'))
        return ret
      }
    ]

重新测试一下

在这里插入图片描述
POST数据正常

猜你喜欢

转载自blog.csdn.net/qq_41784169/article/details/108507435