调用接口常用的方式是axios,但在调的过程中会遇到很多问题， $\color{red}{后台获取不到提交的数据}$是其中之一。

$\color{blue}{问题}$

post请求传参时，数据已经提交，打开开发者工具，点击 network 里面的确有数据已经传过去了，但后台那里打印时没有获取到传过去的参数。所以解决方法如下：

$\color{blue}{解决方案}$

• $\color{purple}{原因}$：
  传参方式是request payload,参数格式是json，而并非用的是form传参，所以在后台用接收form数据的方式接收参数就接收不到了。POST表单请求提交时，使用的Content-Type是application/x-www-form-urlencoded，而使用原生AJAX的POST请求如果不指定请求头RequestHeader，默认使用的Content-Type是text/plain;charset=UTF-8，而此处的Content-Type是：application/json;charset=UTF-8
  
• $\color{purple}{解决方法}$

  • 安装 qs

    npm install qs --save  
    

  • 在页面中引用 qs(根据需求在main.js或者本页面引入)

  • 同时需要将请求头headers改为： ‘Content-Type’: ‘application/x-www-form-urlencoded’

  • axios请求完整部分（包含解决方法）

    this.$axios({
          url: "/flow/gateway",
          method: "post",
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          },
          
          //解决之前代码
           // data: {
           //  username:"anna"
          // }
         
          //解决之后代码
          data: qs.stringify({
           username:"anna"
          })
        }).then(res => {
          console.log(res);
        });
    

    $\color{red}{补充 }$

    qs.stringify和JSON.stringify的区别:

    qs可通过npm install qs命令进行安装，是一个npm仓库所管理的包。而qs.stringify()将对象 序列化成URL的形式，以&进行拼接。JSON是正常类型的JSON，请对比一下输出:

    var a = {name:'anna',age:18};
    console.log('qs',qs.stringify(a))    // name=anna&age=18
    console.log('json',JSON.stringify(a))   //{"name":"anna","age":18}
    

    $\color{red}{以上问题是我在项目中遇到问题时的解决办法，若有其他更好的办法欢迎分享在下面}$???