Varias formas de configurar el formato de datos del formulario en la solicitud posterior

Cuando utilicé el método de publicación predeterminado para enviar datos, descubrí que el backend no podía obtener los datos, pero vi en la red que los parámetros sí estaban pasados. Y también es posible probar con cartero. Después de comparar las dos diferencias, descubrí que cartero usa el formato de datos de formulario, así que usé el formato de datos de formulario para solicitar nuevamente y descubrí que OJBK

Ambos formatos son inutilizables:

 

Método 1: configurar transformRequest

Desventajas: los datos en otros formatos de solicitud también se reformatearán (PUT, PATCH)

import axios from "axios"  //引入

//设置axios为form-data
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.headers.get['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.transformRequest = [function (data) {
    let ret = ''
    for (let it in data) {
      ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
    }
    return ret
}]


//然后再修改原型链
Vue.prototype.$axios = axios

También está esta cita directa:

axios({
   method: 'post',
   url: 'http://localhost:8080/login',
   data: {
      username: this.loginForm.username,
      password: this.loginForm.password
   },
   transformRequest: [
      function (data) {
         let ret = ''
         for (let it in data) {
            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
         }
         ret = ret.substring(0, ret.lastIndexOf('&'));
         return ret
      }
    ],
    headers: {
       'Content-Type': 'application/x-www-form-urlencoded'
    }
})

Método 2: agregar un interceptor de solicitudes y recetar el medicamento adecuado (recomendado)

Todos los principales navegadores admiten la función encodeURIComponent()

Agregue el siguiente código a los axios encapsulados:

//添加请求拦截器
axios.interceptors.request.use(
	config => {
		//设置axios为form-data 方法2
		if (config.method === 'post') {
			let data = ''
			for (let item in config.data) {
				if (config.data[item])
					data += encodeURIComponent(item) + '=' + encodeURIComponent(config.data[item]) + '&'
			}
			config.data = data.slice(0, data.length - 1)
		}
		return config;
	},
	error => {
		console.log("在request拦截器显示错误：", error.response)
		return Promise.reject(error);
	}
);

 Este es el formato actual