通过修改content-type,解决vue axios post请求异常。
项目后端管理采用element-ui构建,使用vue axios进行ajax请求。
使用post进行请求时,后端获取参数失败。分析请求发现Content-Type:application/json;charset=UTF-8,请求参数以request payload形式提交。之前jquery ajax请求Content-Type:application/x-www-form-urlencoded;charset=UTF-8以form data方式提交,未遇到类似问题。
- AJAXAJAX POST请求中参数以form data和request payload形式在servlet中的获取方式 POST请求中参数以form data和request payload形式在servlet中的获取方式 介绍了request payload和form data的区别
- Axios的配置详细介绍了axios的配置及问题的解决方法
修改后的axios配置
import axios from 'axios'
Vue.http = axios;
//`withCredentials`指示是否跨站点访问控制请求
Vue.http.defaults.withCredentials = true;
Vue.http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
修改后通用ajax方法
//工具方法文件
import Vue from 'vue';
//qs对post参数进行序列化
import qs from 'qs'
/**
* 封装ajax请求,所有ajax都经过这个方法发出
* 这个方法返回一个Promise对象
*
* @param {String} uri 请求地址
* @param {Object} params 请求参数对象
* @param {Object} config 配置对象
* @returns Promise
*/
export const ajax = (uri,params,config) =>{
config = config ? config : {};
var setings = {check:true,method:"get"};
for(var key in config){
setings[key] = config[key];
}
if(setings.method=="post"){
params = qs.stringify(params);
}
return new Promise(function(resolve,reject){
Vue.http[setings.method](uri,params).then(function(json){
if(typeof json.data == "string"){
json.data = JSON.parse(json.data);
}
if(json.data.status=="0"){
resolve(json.data);
}else if(json.data.status=="1"){
window.location.hash="#/login"
reject(json.data);
}else{
reject(json.data);
}
},function(json){
json.data = {status:1,message : json.status+' '+json.statusText};
reject(json);
})
});
}
所有评论(0)