[axios]执行POST请求传输data无效 Java后端却只接受到URL地址参数的解决方法

近日遇到一个问题，Java后端的项目，再用Vue项目下axios进行post请求时，将参数放在data中传输无效，后端无法正常识别，反倒是直接像?token=11111这样的URL地址传参后端才能读取。
而且无论设置什么样的content-type都不管用，postman测试却没有问题

问题特点（情况吻合建议参考本文）

• Vue脚手架项目 Axios请求库 POST请求方式
• 放在data中传输无效，URL地址传递有效
• 修改content-type配置为application/x-www-form-urlencoded无效
• 修改content-type配置为multipart/form-data无效
• 修改content-type配置为application/json无效
• postman测试通过
• 后端老弟不管

既然无法跳过，那么我们可以另辟蹊径解决问题

采用QS工具对请求参数进行转换，全部转换为URL参数形式
在请求拦截器中，对请求进行拦截，并追加url
于是，一个关于axios的参数转化封装就大功告成了

安装

• 首先需要对项目安装一下qs

npm install qs

封装

• 根据需要取代码，全文复制不可取

// 基于 axios 封装的请求模块
import axios from 'axios'
// 引入qs
import qs from 'qs'

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  // 超时
  timeout: 10000
})
// 请求拦截器
service.interceptors.request.use(
  config => {
	// 如果data中有参数 进入判断转换
    if(config.data){
      config.url = config.url + "?" + qs.stringify(config.data);
    }
    return config;
  },
  error => {
    console.log(error);
    return Promise.reject(error)
  }
);

export default service

创作不易 点赞收藏转发支持

如果问题不一致欢迎评论区或私信讨论