解决 Vue+SpringBoot中axios发送数据后端接收不到

由于是学习阶段，在接收数据的时候，发现前端发送数据正常，后端服务器接收不到？

这是怎么回事呢？网上查了很多方法，最后发现  如果是 post方式提交需要在

 SpringBoot项目中的Controller 接收参数的时候用@RequestBody 注解一下就行了；get方式则不需要注解

本文章分为前端、后端 两种解决方法，二选一  

1.后端解决方法：

简单说明一下：因为post方式提交的时候会包装成一个json字符串，而get方式传参时 直接追加到地址后面，因此 后台接收get请求不用@RequestBody 注解

前端页面发送数据，添加一个名称。

 

可以看出Content-Type是 application/json;charset=UTF-8

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

但问题就麻烦在这：服务端要求的 'Content-Type': 'application/x-www-form-urlencoded'

怎么解决呢，由于懒，直接改了Controller， 在接收数据这里 @ResquestBody注解一下

因为@requestBody注解常用来处理content-type不是默认的application/x-www-form-urlcoded编码的内容，比如说：application/json或者是application/xml等。一般情况下来说常用其来处理application/json类型。

2.前端解决方法：

引入qs库，我采用的是cdn引入

main.js 中

import QS from 'qs'

然后发送 axios 请求的时候：

 axios({
        method: "post",
        changeOrigin: "true",
        url: "/query/news",
        transformRequest: [
          function(data) {
            // 对 data 进行任意转换处理
            return Qs.stringify(data);
          }
        ],
        data: {
          name: this.channelNname,
          currentPage: this.currentPage
        }
      }).then(result => {
        // 注意 通过axios获取的数据，都在result.data中放着
        var result = result.data;
        console.log(result);
        })

特别推进去这个文章看一下，前端的解决方法我就是在这里看到的，以前不想用qs，现在发现qs挺简单的

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

 

因为涉及到跨域，每次请求都是两次，感觉很浪费，怎么解决呢？ 百度上搜到一个简单的解决方案，设定一个超时时间

具体如何解决，请参考我的另一篇文章:解决axios+SpringBoot跨域请求两次访问的问题