axios使用FormData发送参数/上传图片后台接收不到?

2018年8月20日15:22:46 发表评论

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

axios使用FormData发送参数/上传图片后台接收不到?

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

axios使用FormData发送参数/上传图片后台接收不到?

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

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

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

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

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

一点PHP,一点技术分享。

x

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: