vue axios POST请求后端接收数据异常处理

通过修改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);
        })
    });
}

转载于:https://my.oschina.net/tongjh/blog/1563033