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

问题

1. not supported

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

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

解决方法

1. 在请求时按照接口文档或者后端给的 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 请求的数据封装

1. 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对象填充属性

Postman确定请求类型

如果后端给了postman.json，那么按照postman界面显示来确定请求类型

1. formData
   
   
2. x-www-form-urlencoded
   
   

依据Postman写请求头

1. 用postman正常发起一次请求，获取到数据后，在下图的位置有个代码样式的按钮，点开
   
   
2. 复制其内容中的header，粘贴到 request 的 headers 中