Axios配合Redux Saga调用Node.js+Express接口时FormData提交失败问题

为什么修改后FormData可以正常提交？ #

FormData是浏览器提供的特殊内置对象，用于存储表单键值对，它内部存储的属性是不可枚举的，JavaScript的展开运算符...无法读取到它内部存储的字段，所以你之前写{...data}的时候，实际上得到的是一个没有任何属性的空普通对象，传到Axios后自然不会携带任何表单数据，请求payload为空。
而你直接调用Axios时没有对FormData做展开操作，Axios可以正确识别FormData实例，自动序列化里面的字段发送给后端，所以能正常运行。

修改会不会影响非FormData格式的数据提交？ #

不会有负面影响，反而兼容性更好：

• 对于普通JSON请求（传入普通JS对象）：原来的{...data}只是对原对象做了一次浅拷贝，现在直接传原对象，Axios都会自动把对象序列化为JSON字符串，请求逻辑完全一致。
• 对于其他特殊请求体类型（比如URLSearchParams、Blob、ArrayBuffer等）：原来的展开操作同样会丢失对象内部数据，现在直接传原实例，Axios可以正确识别类型，自动处理序列化和请求头设置，反而修复了原来的潜在bug。

额外优化建议 #

你不需要手动设置content-type: multipart/form-data请求头，Axios识别到请求体是FormData实例时，会自动添加该头，同时自动生成符合规范的boundary分隔符，手动设置反而可能遗漏boundary导致后端无法正常解析表单数据。

内容的提问来源于stack exchange，提问作者Muhammad Ashraf