axios发送post请求,springBoot接收不到数据问题?
在正常情况(代码无错、网络正常等)下,不是收不到,而是不会拿!
根本的问题在于以下两点:
1)请求发送时,其数据存放在哪?
2)接收请求时,从那获取请求所携带的数据?
先来对比一下<form>中的原生post请求与axios.post
后端测试post请求的一个接口:http://localhost:9001/api/test/post
源码如下:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Test</title> 6 </head> 7 <body> 8 <!-- test form to post --> 9 <h1>test form to post</h1> 10 <form action="http://localhost:9001/api/test/post" method="post"> 11 <input type="text" name="id" /> 12 <input type="text" name="password" /> 13 <input type="submit" value="提交"> 14 </form> 15 <hr /> 16 17 <!-- test axios to post --> 18 <h1>test axios to post</h1> 19 <script src="https://unpkg.com/axios/dist/axios.min.js"></script> 20 <script> 21 function startPost() { 22 const url = 'http://localhost:9001/api/test/post'; 23 axios.post(url,{ 24 id: '李四', 25 password: 123456 26 }) 27 } 28 </script> 29 <button onclick="startPost()">axios to post</button> 30 </body> 31 </html>
接口代码:其中Admin是一个拥有id、password属性的要给简单对象
用Wireshark捕获到的请求数据情况如下:
很直观看到两种方式的http请求的Content-Type不一样
Content-Type不一样其请求参数存放的位置(或者说是字段)也可能不一样,再细看:
对于这些存放的位置的专业术语(方法体、请求体什么的)不太懂,
但是可以简单地推断出在springMVC使用默认映射参数的方法时是会在“HTML Form URL Encoded”中获得参数,
而不会在“JavaScript Object Notation”中获得参数。
在理论上,解决“axios发送post请求,springBoot接收不到数据”这么个问题有了两个很明了的方向:
1)在前端中,将请求参数存放在后端接口默认能取到的地方;
2)在后端中,根据前端的请求方式,改变获取参数的地方。
(注:如果开发是面对接口的,针对这种情况,在开发时的接口文档中也应注明请求参数的存放信息等)
具体操作参考:axios发送post请求,springMVC接收不到数据问题
人人须日日改过,一旦无过可改,即一日无步可过矣。若发现不妥的点请务必指出,非常感谢。