axios post请求后端接收不到参数的解决办法

这里我会介绍三种前端处理方法


前言:在SpringMVC不做过多数据获取处理,单纯依靠默认的Spring映射关系,就会出现接收不到参数的结果。
两个原因: Content-Type不正确和 发送数据没有格式化,只要把 Content-Type设置为 application/x-www-form-urlencoded;charset=UTF-8和格式化数据即可

第一种方法(推荐)

设置拦截器可以更好的进行一些相应的操作,而且把Content-Type设置为application/x-www-form-urlencoded;charset=UTF-8防止中文乱码

import Vue from 'vue'
import axios from 'axios'
import qs from 'qs';

let baseURL = 'http://localhost:8081/'

//创建axios实例 
const request = axios.create({
	baseURL: baseURL,
	timeout: 10000
});
// 2.请求拦截器
request.interceptors.request.use(config => {
  	//发请求前做的一些处理,数据转化,配置请求头,设置token,设置loading等,根据需求去添加
	if(config.method.toLowerCase() == "get"){ //配置get请求数据(这里是容错处理)
		if(config.data != undefined) config.params = config.data;
	}
	//防止post请求,后端无法接收参数问题(方式一)
   if(config.method.toLowerCase() == "post"){ //post请求配置数据转换和请求头
    	 config.data = qs.stringify(config.data); //数据转化,也可以使用qs转换
		config.headers = {
			'token':uni.getStorageSync("token"),
			'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8' //配置请求头
	   }
   }
  return config
}, error => {
  Promise.reject(error)
});

第二种方法

格式化数据,Content-Type默认变成application/x-www-form-urlencoded,会出现中文乱码现象

import axios from 'axios'
import qs from 'qs';
let baseURL = 'http://localhost:8081/'
const request = axios.create({
	baseURL: baseURL,
	timeout: 10000,
	 //防止post请求,后端无法接收参数问题(方式二)
    transformRequest: [function(data) {
       const str = []
       for (const i in data) {
         str.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i]))
       }
       return str.join('&')
     }] 
});

第三种方法

import axios from 'axios'
import qs from 'qs';

const request = axios.create({
	baseURL: baseURL,
	timeout: 10000,
	 //防止post请求,后端无法接收参数问题(方式三)
 	 transformRequest: [
	     function(data) {
	       return qs.stringify(data)
	     }
	   ] 
});

写的很简单,关键点还是没有讲到,先结束了

上一篇:[转]vue-element-admin(一)配置后台api接口baseUrl


下一篇:web项目开发流程