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

  • Post author:
  • Post category:vue


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数据正常



版权声明:本文为qq_41784169原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。