axios 发送 form-data 请求和 x-www-form-urlencoded请求以及相关问题

问题

not supported

{
    "msg": "Content type 'multipart/form-data;boundary=--------------------------714795402464721152224475;charset=UTF-8' not supported",
    "code": 500
}

这个是因为 form-data 请求没有被后端支持，联系后端确认请求格式；关键就是 msg 中第一个分号前的内容，例子是 form-data

解决方法

在请求时按照接口文档或者后端给的 postman.json 配置请求头 header

  return request({
    url: 'API',
    headers: { //这里配置请求头
      isToken: true,
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    method: 'post',
    data: data,
    timeout: -1
  })

例子中，请求添加了headers字段，request对象为封装的axios请求，isToken字段表示将会携带token给后端；第二个'Content-Type'为设置的请求类型，当前设置的为x-www-form-urlencoded，也可以设置为其他的，比如form-data。如何确定该字段内容，详见文末 依据Postman写请求头

FormData 与 x-www-form-urlencoded 请求的数据封装

FormData
在使用FormData格式发送请求时，需要将数据用FormData的对象封装起来，然后传给后台

function getList(params){
	const data = new FormData()
	data.append("pageSize", data.pageSize) 
	data.append("pageNum", data.pageNum)
	return request({
		url: 'api',
		headers: {
		  isToken: true,
		  'Content-Type': 'multipart/form-data'
		},
		method: 'post',
		data: data,
		timeout: -1
	})
}

在上面的例子中，FormData为form-data请求的数据格式，data.append(key, value)方法的第一个参数是后端指定的参数名，第二个是值
2. x-www-form-urlencoded

export function getDetail(params) {
  const data = new URLSearchParams()// 这个就是 x-www-form-urlencoded 要封装的数据格式
  data.append('trackIds', params) // 第一个参数是后端指定的参数名，第二个是值
  return request({
    url: 'api',
    headers: {
      isToken: true,
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    method: 'post',
    data: data,
    timeout: -1 //表示请求永不超时
  })
}

x-www-form-urlencoded请求需要将数据封装为URLSearchParams对象，利用append(key,value)方法按照第一个参数是后端指定的参数名，第二个是值的方法为URLSearchParams对象填充属性