• axios 使用post方式传递参数,后端接受不到


    最近做vue项目,做图片上传的功能,使用get给后台发送数据,后台能收到,使用post给后台发送图片信息的时候,
    vue axios post请求发送图片base64编码给后台报错HTTP 错误 414
    请求一直报错,显示 request URI too large
    后台显示一直没有收到数据 参数为null。网上查看了很多资料,才知道axios post传参的问题。

     this.$axios({
        method: 'post',
        url:url,
        params: {
            is_iso:1,
            goods_id:goods_id
        }
    }).then((res)=>{
    
    })

    一开始我是这么写的 ,post里面的数据放在params里面,这样是有问题的,在使用axios时,要注意到配置选项中包含params和data两者,以为他们是相同的,实则不然。 
    因为params是添加到url的请求字符串中的,用于get请求。
    而data是添加到请求体(body)中的, 用于post请求。

    然后我把params改为了data,后台还是接收不到,查阅了很多资料,需要把Content-Type为application/x-www-form-urlencoded,
    jquery在执行post请求时,会设置Content-Type为application/x-www-form-urlencoded,所以服务器能够正确解析,而使用原生ajax、axios请求时,如果不显示的设置Content-Type,那么默认是text/plain,这时服务器就不知道怎么解析数据了,所以才只能通过获取原始数据流的方式来进行解析请求数据。

    打开控制台,报400,报错信息是:传递的参数不存在,但在请求中看的到参数,只是参数的格式是Request Payload,具体也没看懂是什么,总之知道就是参数格式不对,查阅资料找到两种解决办法,代码如下:

    解决办法:

    一、URLSearchParams

    1、在main.js里 设置配置,修改Content-Type

    import axios from 'axios';
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
    Vue.prototype.$axios = axios;

    2、在组件vue里

    const url ='http://****你的接口****';
    var params = new URLSearchParams();
    params.append('key1', 'value1');       //你要传给后台的参数值 key/value
    params.append('key2', 'value2');
    params.append('key3', 'value3');
    this.$axios({
        method: 'post',
        url:url,
        data:params
    }).then((res)=>{
        
    });

    这样后台就收到数据了 请求成功;不过这个方法兼容性非常不好,ie浏览器完全不兼容。

    二、使用qs

    安装qs,在 main.js里引入

    import axios from 'axios';
    import qs from 'qs';
    Vue.prototype.$qs = qs;

    在vue组件里面请求方法

    let postData = this.$qs.stringify({
        key1:value1,
        key2:value2,
        key3:value3,
    });
    this.$axios({
        method: 'post',
        url:'url',
        data:postData
    }).then((res)=>{
        
    });
     
     

    这样就ok了

  • 相关阅读:
    SQLite剖析之异步IO模式、共享缓存模式和解锁通知
    SQLite剖析之动态内存分配
    SQLite剖析之锁和并发控制
    SQLite剖析之临时文件、内存数据库
    SQLite剖析之数据类型
    关于Docker目录挂载的总结(一)
    docker常用命令
    玩转docker(一)
    go hello
    术语“go”不被识别为cmdlet,函数,脚本文件或可操作程序的名称
  • 原文地址:https://www.cnblogs.com/TigerZhang-home/p/10109299.html
Copyright © 2020-2023  润新知