在用vue-cli中axios组件的与后端做交互的时候遇到了一些问题,当然这些问题归根结底还是我太菜.以下把问题分享出来.
首先是axios默认发送的数据是json格式,而后端接收的时候常常是用表单格式接收的.这时候就需要我们来指定了.当和后端沟通好大部分的数据是from传递的时候按照下面的写法,在axios.js中 添加

import Qs from "qs";//这个包axios自带引入就可以
axios.defaults.transformRequest = function(data) {
  //在请求之前对data传参进行格式转换
  data = Qs.stringify(data);
  return data;
};

这样全局的参数就都被格式化成form格式传递给后端了.
当然也有部分后端在一些接口需要使用json方式进行提交.
这时候按照如下代码单独进行设置(其实就是覆盖一下原来的变成最初的json提交数据)另外别忘了加上header哦~

headers: {
          "Content-Type": "application/json;charset=UTF-8"
        },
        transformRequest :function(data) {
          //在请求之前对data传参进行格式转换
          return data;
        },

到这里你以为大功告成了?其实并没有,我这里测试用axiosget方式发送json数据,不奏效...奇怪了明明代码一点问题也没有.我尝试了用postman测试后端接口...奇怪了后端的接口也没有问题.排查了半天之后,终于发现了axios默认get请求是发送不了json的.所以大家记得提交数据的时候,尽量多用post!!!别用get!!!

Last modification:April 22, 2022
如果觉得我的文章对你有用,请随意赞赏