axios 发 post 请求,后端接收不到参数的解决方案

2018-09-12 17:49:43


问题场景

场景很简单,就是一个正常 axios post 请求:

axios({
    headers: {
        'deviceCode': 'A95ZEF1-47B5-AC90BF3'
    },    method: 'post',
    url: '/api/lockServer/search',
    data: {
        username,
        pwd
    }})1234567891011

后台说没有接收到你的传参。

这就有点奇怪了,我看了一下浏览器的请求信息是 OK 的,参数都是有的,而且之前这样用 axios 也没有这个问题。

但是这个接口是通用的,别人都用了,是 OK 的,接口没问题。

问题原因

要点1

原因就是这次的接口使用 java spring mvc 
并且在这个方法上使用了注解 @RequestParam

那么这个是什么意思呢,这个是只能从请求的地址中取出参数,也就是只能从 username=admin&password=admin这种字符串中解析出参数。

要点2

我们还可以看到我们这次请求的 Content-Type:

application/json;charset=UTF-81

关于这一点需要说明的是:

1、axios会帮我们 转换请求数据和响应数据 以及 自动转换 JSON 数据 

2、在 axios 源码中发现下面这段内容:(很关键) 
 
我们知道在做 post 请求的时候,我们的传参是 data: {...} 或者直接 {...} 的形式传递的,嗯,就是下面这两种形式

【第一种形式】 

【第二种形式】 

非常的刺激,这两种形式无一例外都触发了 axios 源码中【很关键】的那一段代码

问题分析

也就是说,我们的 Content-Type 变成了 application/json;charset=utf-8 
然后,因为我们的参数是 JSON 对象,axios 帮我们做了一个 stringify 的处理。 
而且查阅 axios 文档可以知道:axios 使用 post 发送数据时,默认是直接把 json 放到请求体中提交到后端的。

那么,这就与我们服务端要求的 'Content-Type': 'application/x-www-form-urlencoded' 以及 @RequestParam 不符合。

解决方案

解决方案一

【用 URLSearchParams 传递参数】

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

需要注意的是: 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)
})1234567891011121314

解决方案三

既然 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'
    }
})12345678910111213141516

解决方案四

【重写一个 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;
    }],
})1234567891011121314151617181920212223242526272829

解决方案五

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

解决方案六

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

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

  • 2020-04-02 17:02:25

    vue怎么能像jquery那样获得数据

    有时候我们需要获得动态的元素,但是我们没法直接用vue语法,vue一共了当前组件的对象,我们可以避免使用document.get...之类的。

  • 2020-04-02 21:38:15

    Nginx向ExpressJS转发真实IP地址

    由于服务器配置了Nginx的反向代理,在ExpressJS中无法获取到真实的IP地址。本文就介绍了如何配置Nginx以及ExpressJS使其可以显示用户的真实地址。

  • 2020-04-03 08:53:06

    使用自己的QQ邮箱发送自动发送邮件

    话说网上发送邮件的代码很多,但是我由于不细心,导致拿别人的代码发送邮件老是失败,今天就说说几个要注意的地方吧!!!

  • 2020-04-03 10:20:20

    Vue 项目性能优化

    Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM 操作部分, 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM;但 Vue 项目中仍然存在项目首屏优化、Webpack 编译配置优化等问题,所以我们仍然需要去关注 Vue 项目性能方面的优化,使项目具有更高效的性能、更好的用户体验。本文是作者通过实际项目的优化实践进行总结而来,希望读者读完本文,有一定的启发思考,从而对自己的项目进行优化起到帮助。本文内容分为以下三部分组成:

  • 2020-04-03 13:07:46

    flex布局与position:absolute/fixed的冲突问题

    导航栏内,平均分为四块,为了适配各种移动设备,使用了flex布局。 与此同时,产品经理要求:页面上滚越过封面图时,导航栏变为固定定位,浮在页面顶部。 拿到需求之后,思路就是先搞好布局,然后监听window.onscroll,当页面滚的距离大于封面图的时候,给ul加入position:fixed。

  • 2020-04-03 16:56:59

    Inkscape教程

    本教程演示了Inkscape基础使用。这是常规Inkscape文档,你可以预览、编辑、复制、保存。 本教程包括画布导航、管理文档、形状工具基础、选择技术、使用选择转换对象、分组、设置填充和画笔、对齐和Z顺序。有关更高级的主题请查看帮助菜单中的其它教程。

  • 2020-04-03 17:04:35

    Inkscape/SVG附中文教程PDF

    Inkscape中的终极工具是XML编辑器(Shift+Ctrl+X),可以实时显示整个文档的XML树形图。修改绘图时,你可以注意一下XML树形图中的变化。也可以在XML编辑器中修改文本、元素或者节点属性,然后在画图上查看效果。这是一个非常形象化的学习SVG格式的交互式工具。并且可以实现一些通常的编辑工具无法完成的功能。

  • 2020-04-03 19:09:31

    CryptoJS.enc.UTF8 中文乱码

    ret = CryptoJS.AES.encrypt(data,'secret key 123') content = ret.toString() result = CryptoJS.AES.decrypt(content,'secret key 123') print(result.toString(CryptoJS.enc.Utf8))