vue 数据请求content-type 全局设置和部分覆盖设置

最新推荐文章于 2026-06-20 16:45:26 发布

原创最新推荐文章于 2026-06-20 16:45:26 发布 · 1.3w 阅读

14 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue

收录于

vue常见问题专栏收录该内容

35 篇文章

订阅专栏

本文介绍了在Vue应用中如何全局和部分接口设置Content-Type，以适应不同的数据传输格式。在request.js中可以设置axios的默认Content-Type为'application/json;charset=utf-8'，而在需要使用'application/x-www-form-urlencoded'格式的接口中，可以通过覆盖headers并使用transformRequest转换数据格式。详细步骤和代码示例帮助开发者理解并实现不同数据格式的请求。

vue 数据请求content-type 全局设置和部分覆盖设置

1.全局设置：
在request.js中设置

axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'

2.部分接口不是json 格式传输时，设置单独的 Content-Type

headers: {
 'Content-Type': 'application/x-www-form-urlencoded'
 },

// 登录方法
export function login(username, password, code, uuid) {
  const data = {
    username:username,
    password:password
  }
  return request({
    url: '/user/login',
    method: 'post',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    data: data,
    transformRequest: [function (data) {
      // 数据默认会以json格式传递，需要转成key-value
      let ret = '';
      for (let i in data) {
        ret += encodeURIComponent(i) + '=' + encodeURIComponent(data[i]) + '&'
      }
      return ret.slice(0, -1);
    }],
  })
}