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

╰+攻爆jí腚メ 2022-12-09 01:59 157阅读 0赞

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))

# ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE3NjEzMTk1_size_16_color_FFFFFF_t_70][]o #

--------------------

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

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

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

![20200609155251515.png][]

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;

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE3NjEzMTk1_size_16_color_FFFFFF_t_70]: /images/20221123/d4c3bdc414d14adcb21510dd2f619c5b.png
[20200609155251515.png]: /images/20221123/9c0a20f8087f4d73a5d18625f4fd3092.png