axios使用FormData发送参数/上传图片后台接收不到？一点PHP博客

2018年8月20日15:22:46 2

分享一个axios大坑，遇到一个前端朋友使用axios去做图片上传功能时发现后端拿不到数据，而且只要使用了FormData方式进行传参，在浏览器中一概看不见任何参数，而使用Jquery是没有问题的。

一直以为原因是因为Jq和axios中的传参形式默认都是json方式而FormData并不是json方式，在请求的头中可以看到。但是我们在axios中设置了请求头Content-Type:multipart/form-data依然没有任何效果，在浏览器HTTP头部依旧默认是json格式，无法改变他的请求头部。

后面发现原因是因为在axios源码中存在这么一段代码

if (utils.isFormData(requestData)) {

delete requestHeaders['Content-Type']; // Let the browser set it

}

意思是FormData的数据不需要设置header头。

后面发现真正的问题并不是header头的问题导致的，而是需要设置成这样

const instance=axios.create({

withCredentials: true

})

instance.post('ecp/peiapi/uploadDeliveryImg.json', formData)

.then(response => {

console.log(response.data)

})

因为涉及到跨域所以需要带上凭证，而最坑的是在axios官方中文文档中都搜不到，具体为什么需要带上凭证才可以进行form-data传参博主也没有想明白。

注: 关于withCredentials的其他知识-服务端也需要设置好返回头Access-Control-Allow-Credentials: true；还有一点要注意的，返回头Access-Control-Allow-Origin的值不能为星号，必须是指定的域，否则cookie等认证信息也是发送不了。

一点PHP，一点技术分享。