Axios请求中Content-Type的使用总结

Axios请求头中的Content-Type常见的有3种：

　　　　1.Content-Type:application/json

　　　　2.Content-Type:application/x-www-form-urlencoded

　　　　3.Content-Type:multipart/form-data

---

1.Content-Type: application/json

Axios中默认的请求类型，它声明了请求数据会以json字符串的形式发送。在php中，使用$_POST是接收不到的

var param = {
    name: 'p',
    children: {
        name: 'child'
    }
}
this.$axios.post(url, param)
    .then(res => console.dir(res))

o

---

2.Content-Type:application/x-www-form-urlencoded

由于第一种类型php接收不到，所以我们要使用Axios自带的qs.stringify()对参数进行序列化，序列化后Content-Type就变成了application/x-www-form-urlencoded，它声明了请求数据会以键值对（普通表单形式）的形式发送，

通过在src目录下新建axios文件夹，文件夹中新建index.js，设置请求拦截。内容如下：

import Vue from 'vue';
import axios from 'axios';
import qs from 'qs';//引入qs，axios在post参数时，要通过qs来格式化数据

// 添加请求拦截器
axios.interceptors.request.use( 
    config => {
        if (config.method == 'post') {
            config.data = qs.stringify(config.data);//对参数进行序列化
        }
        return config;
    },
    error => {
        console.log('请求出错啦');
        console.dir(error)
        return Promise.reject(error);
    }
);

// 添加响应拦截器
axios.interceptors.response.use(
    response => {
        return response;
	}, 
    error => {
        return Promise.reject(error);
    }
);
Vue.prototype.$axios = axios;

在main.js中引入Axios

import '@/axios';//引入axios

这样，在发送post请求时，Content-Type就会自动变成application/x-www-form-urlencoded了

但是这样做在上传图片时会有问题，接着看第3点

---

3.Content-Type:multipart/form-data

它一般用来上传文件，我的上传图片代码如下：

async selectedFile($event) {
    let formData = new FormData();
    formData.append('img', $event.target.files[0]);
    this.$axios.post(url, formData, {headers: {'Content-Type': 'multipart/form-data'}})
        .then(res => console.dir(res));
},

但是由于第2步中，我们对Axios的请求进行拦截，默认对参数进行序列化了，导致Content-Type总是为pplication/x-www-form-urlencoded。这时文件就会传不到后台

因此要对src/axios/index.js进行修改：

import Vue from 'vue';
import axios from 'axios';
import qs from 'qs';//引入qs，axios在post参数时，要通过qs来格式化数据

// 添加请求拦截器
axios.interceptors.request.use( 
    config => {
        // 以下两种判断方式任选
        if (config.headers['Content-Type'] == 'multipart/form-data') {
        // if (Reflect.getPrototypeOf(config.data).constructor.name == 'FormData') {
            // 请求类型 Content-Type: multipart/form-data
        } else if (config.method == 'post') {
            config.data = qs.stringify(config.data);
            // 经过qs.stringify序列化后，请求类型变成了application/x-www-form-urlencoded
        }
        return config;
    },
    error => {
        return Promise.reject(error);
    }
);

// 添加响应拦截器
axios.interceptors.response.use(
    response => {
        return response;
    }, 
    error => {
        return Promise.reject(error);
    }
);
Vue.prototype.$axios = axios;