axios设置 application/x-www-form-urlencoded无效

三种请求方式的区别

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

设置后无效的原因是请求参数没有进行序列化,使用stringify()无效

const service = axios.create({
  // baseURL: 'http://localhost:8082', // api的base_url
  timeout: 50000, // 请求超时时间,
  headers: {
    // 'Accept': 'application/json, text/javascript, */*; q=0.01',
    'Content-Type': 'application/x-www-form-urlencoded'
    /**
     * Content-Type: application/json : 
     * 请求体中的数据会以json字符串的形式发送到后端
     * Content-Type: application/x-www-form-urlencoded:
     * 请求体中的数据会以普通表单形式(键值对)发送到后端
     * Content-Type: multipart/form-data: 
     * 它会将请求体的数据处理为一条消息,以标签为单元,用分隔符分开。既可以上传键值对,也可以上传文件。
     */
  }
})

此时虽然已经配置了application/x-www-form-urlencoded,但是发送请求时,请求的数据依旧是json格式
是因为请求参数没有序列化,此时需要使用qs对请求参数进行序列化

service.interceptors.request.use(config => {
  config.data = qs.stringify(config.data) 
  return config
}, error => { // 请求错误处理
  Promise.reject(error)
})

你可能感兴趣的:(前端学习,javascript,前端,json)