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