Plusieurs façons de définir le format des données du formulaire dans la demande de publication

Lorsque j'ai utilisé la méthode de publication par défaut pour envoyer des données, j'ai constaté que le backend ne pouvait pas obtenir les données, mais j'ai vu sur le réseau que les paramètres étaient effectivement transmis. Et il est également possible de tester avec postman. Après avoir comparé les deux différences, j'ai trouvé que postman utilise le format de données de formulaire, j'ai donc utilisé le format de données de formulaire pour demander à nouveau et j'ai trouvé que OJBK

Les deux formats sont inutilisables :

 

Méthode 1 : configurer transformRequest

Inconvénients : Les données dans d'autres formats de requête seront également reformatées (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

Il y a aussi cette citation directe :

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éthode 2 : Ajouter un intercepteur de requêtes et prescrire le bon médicament (recommandé)

Tous les principaux navigateurs prennent en charge la fonction encodeURIComponent()

Ajoutez le code suivant aux axios encapsulés :

//添加请求拦截器
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);
	}
);

 C'est le format actuel