React基于fetch的表单提交

最新推荐文章于 2025-11-06 00:49:38 发布

原创最新推荐文章于 2025-11-06 00:49:38 发布 · 1.6w 阅读

4 ·

CC 4.0 BY-SA版权

本文探讨了在React应用中使用fetch进行表单提交时遇到的问题，特别是当后端SpringMvc无法正确获取Key值的情况。尽管设置了Content-Type为application/x-www-form-urlencoded，并期望数据以URL编码方式提交，但实际请求仍以multipart/form-data方式发送。只有调整格式才能使后端正确接收数据。

在用fetch进行表单提交时，参照https://github.com/github/fetch的用法

let data = new FormData(document.getElementById('login-form'))
        	fetch('../membership/authenticate', {method: "POST",
        		headers:{
        			'Content-Type': 'application/x-www-form-urlencoded'
        		},
        		body: data}).then(function(response) {
        		
        	},function(error){
        		
        	})

格式被转为了WebKitFormBoundary模式:

此时我后端springMvc是取不到Key值。

明明已经设置了ContentType为application/x-www-form-urlencoded，设置 enctype 属性，那么最终就会以 application/x-www-form-urlencoded 方式提交数据。提交的数据按照 key1=val1&key2=val2 的方式进行编码，key 和 val 都进行了 URL 转码。

却还是按照multipart/form-data提交，

如果按照如下格式则能够正常取得到值：

let data = 'username=' + values.username + '&password=' + values.password;
        	fetch('../membership/authenticate', {method: "POST",
        		headers:{
        			'Content-Type': 'application/x-www-form-urlencoded'
        		},
        		body: data}).then(function(response) {
        		
        	},function(error){
        		
        	})