记一次使用axios设置header不生效的问题

日常开发中，后台请求接口使用post的时候有3种情况普通的post请求，数据是以json的形式提交到后台，对应Content-type:application/json上传文件，数据是以FormData的形式提交到后台，工具会自动处理请求头,对应Content-type:multipart/form-data表单形式提交需要设置对应Content-type:application/x-www-fo

parade岁月

9688人浏览 · 2022-02-17 22:43:00

parade岁月 · 2022-02-17 22:43:00 发布

日常开发中，后台请求接口使用post的时候有3种情况

普通的post请求，数据是以json的形式提交到后台，对应Content-type:application/json
上传文件，数据是以FormData的形式提交到后台，工具会自动处理请求头,对应Content-type:multipart/form-data
表单形式提交需要设置对应Content-type:application/x-www-form-urlencoded

Content-Type: application/json ： 
请求体中的数据会以json字符串的形式发送到后端
Content-Type: application/x-www-form-urlencoded：
请求体中的数据会以普通表单形式（键值对）发送到后端
Content-Type: multipart/form-data： 
它会将请求体的数据处理为一条消息，以标签为单元，用分隔符分开。
既可以上传键值对，也可以上传文件。

项目中遇到了需要表单形式的提交，然后设置了Content-type，结果请求的时候没有生效，找了好久原因，也Google了好久都没解决，最后静下心来检查了一下代码，发现是axios封装的有问题
封装代码如下:

 // 请求拦截器
  /****** request拦截器==>对请求参数做处理 ******/
service.interceptors.request.use(config => {
  app.$vux.loading.show({
    text: '数据加载中……'
  });
 
  config.headers = {
        "Accept-Language":"en-CN;q=1.0",
        "source_type":"apple-appstore",
        "version_code":"5.4.8",
        "Content-Type":"application/json",
        "push_device_type":"4",
        "Accept": "*/*"
      }
 
  return config;
}, error => { //请求错误处理
  app.$vux.toast.show({
    type: 'warn',
    text: error
  });
  Promise.reject(error)
})

接口请求代码如下:

export function checkBlackWord(baseURL,data){
    return request.request({
        url:"/v1/Message/CheckBlackWord",
        method:"post",
        data:qs.stringify(data),
        baseURL,
        headers:{
            "Content-Type": "application/x-www-form-urlencoded"
        }
    })
}

如上造成的现象是接口请求中设置的"Content-Type": "application/x-www-form-urlencoded不生效，浏览器调试显示的依然是Content-Type":"application/json
最后定位原因是axios请求封装直接设置headers为一个新对象，这种不管接口请求中设置任何header都会被覆盖，所以修改后如下:

 // 请求拦截器
  /****** request拦截器==>对请求参数做处理 ******/
service.interceptors.request.use(config => {
  app.$vux.loading.show({
    text: '数据加载中……'
  });
 
  let headers = {
        "Accept-Language":"en-CN;q=1.0",
        "source_type":"apple-appstore",
        "version_code":"5.4.8",
        "Content-Type":"application/json",
        "push_device_type":"4",
        "Accept": "*/*"
      }
  config.headers = {...headers,...config.headers}//如果不这样写,那么在接口中设置的header都会被覆盖
  return config;
}, error => { //请求错误处理
  app.$vux.toast.show({
    type: 'warn',
    text: error
  });
  Promise.reject(error)
})

利用对象的解构赋值语法，合并接口的配置和统一的配置