美文网首页
axios利用post提交数据,服务端无法接收到

axios利用post提交数据,服务端无法接收到

作者: 夏夏夏夏顿天 | 来源:发表于2018-11-20 09:31 被阅读21次

    解决方案,引用qs模块,即可,将post提交的数据转为参数的形式提交给后端

    解决方案

    解决方案一

    【用 URLSearchParams 传递参数】

    let param = new URLSearchParams()
    param.append('username', 'admin')
    param.append('pwd', 'admin')
    axios({
        method: 'post',
        url: '/api/lockServer/search',
        data: param
    })
    

    需要注意的是: URLSearchParams 不支持所有的浏览器,但是总体的支持情况还是 OK 的,所以优先推荐这种简单直接的解决方案

    解决方案二

    网上有很多方案说使用

    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
    

    或者

    {headers:{'Content-Type':'application/x-www-form-urlencoded'}}
    

    我试了一下,其实这样还是不行的
    【还需要额外的操作,(我们要将参数转换为query参数)】
    引入 qs ,这个库是 axios 里面包含的,不需要再下载了。

    import Qs from 'qs'
    let data = {
        "username": "admin",
        "pwd": "admin"
    }
    
    axios({
        headers: {
            'deviceCode': 'A95ZEF1-47B5-AC90BF3'
        },
        method: 'post',
        url: '/api/lockServer/search',
        data: Qs.stringify(data)
    })
    

    解决方案三

    既然 axios 源码中有那么一段【很关键】的代码,那么,我们也可以通过修改 transformRequest 来达到我们的目的。

    在 axios 的请求配置项中,是有 transformRequest 的配置的:

    OK,那么现在我们的请求就可以写成下面这个样子了:

    import Qs from 'qs'
    axios({
        url: '/api/lockServer/search',
        method: 'post',
        transformRequest: [function (data) {
            // 对 data 进行任意转换处理
            return Qs.stringify(data)
        }],
        headers: {
            'deviceCode': 'A95ZEF1-47B5-AC90BF3'
        },
        data: {
            username: 'admin',
            pwd: 'admin'
        }
    })
    

    解决方案四

    【重写一个 axios 实例,重新实现属于我们自己的 transformRequest】

    import axios from 'axios'
    let instance = axios.create({
        transformRequest: [function transformRequest(data, headers) {
            normalizeHeaderName(headers, 'Content-Type');
            if (utils.isFormData(data) ||
              utils.isArrayBuffer(data) ||
              utils.isBuffer(data) ||
              utils.isStream(data) ||
              utils.isFile(data) ||
              utils.isBlob(data)
            ) {
              return data;
            }
            if (utils.isArrayBufferView(data)) {
              return data.buffer;
            }
            if (utils.isURLSearchParams(data)) {
              setContentTypeIfUnset(headers, 'application/x-www-form-urlencoded;charset=utf-8');
              return data.toString();
            }
            /*改了这里*/
            if (utils.isObject(data)) {
              setContentTypeIfUnset(headers, 'application/x-www-form-urlencoded;charset=utf-8');
              let _data = Object.keys(data)
              return encodeURI(_data.map(name => `${name}=${data[name]}`).join('&'));
            }
            return data;
        }],
    })
    

    解决方案五

    axios.post('/api/lockServer/search',"userName='admin'&pwd='admin'");
    

    解决方案六

    我们知道现在我们服务端同学接收参数用的是 @RequestParam(通过字符串中解析出参数)
    其实还有另一种是 @RequestBody(从请求体中获取参数)。

    我们让后端的同学改成 @RequestBody 不就可以了吗,(#.#) 【他说我才不改呢】

    作者:Yu丶
    来源:CSDN
    原文:https://blog.csdn.net/csdn_yudong/article/details/79668655
    版权声明:本文为博主原创文章,转载请附上博文链接!

    参考:
    https://blog.csdn.net/csdn_yudong/article/details/79668655

    相关文章

      网友评论

          本文标题:axios利用post提交数据,服务端无法接收到

          本文链接:https://www.haomeiwen.com/subject/tyhtqqtx.html