angular6 的HttpClient.post方法发送参数失败，总是报500的错误
匿名 · 更新于 2019/2/13
angular的ajax请求真的是太坑了，只要涉及到发送参数的就有问题，会报500，即使你传对了参数，后台也接收不到，这个问题其实不是后台的问题， 而是因为angular的请求方法中，涉及到传参的时候，angular并没有处理数据格式，get和post请求是一样的，当post方法把数据发送过去的时候，被浏览器加密成object了，一般后台要求的数据格式是这样的：
但是前提发送的一般是纯json，
-
<div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 0px 8px; overflow-wrap: break-word; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px; overflow-wrap: break-word;"><code class="language-javascript hljs" style="box-sizing: border-box; outline: 0px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; display: block; overflow-x: auto; padding: 8px; color: rgb(56, 58, 66); background: rgb(250, 250, 250); border-radius: 4px; line-height: 22px; white-space: pre; overflow-wrap: break-word;">{<span class="hljs-attr" style="box-sizing: border-box; outline: 0px; color: rgb(152, 104, 1); overflow-wrap: break-word;">json</span>:{</code></div> </div> </li> <li style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px; list-style-type: none; overflow-wrap: break-word; height: 22px;"> <div class="hljs-ln-numbers" style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px; overflow-wrap: break-word; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 14px; float: left; height: 22px; width: 24px; border-right: 1px solid rgb(197, 197, 197);"> <div class="hljs-ln-line hljs-ln-n" data-line-number="2" style="box-sizing: border-box; outline: 0px; padding: 0px 8px 0px 0px; margin: 0px; text-align: right; overflow-wrap: normal;"> </div> </div> <div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 0px 8px; overflow-wrap: break-word; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px; overflow-wrap: break-word;"><code class="language-javascript hljs" style="box-sizing: border-box; outline: 0px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; display: block; overflow-x: auto; padding: 8px; color: rgb(56, 58, 66); background: rgb(250, 250, 250); border-radius: 4px; line-height: 22px; white-space: pre; overflow-wrap: break-word;"><span class="hljs-string" style="box-sizing: border-box; outline: 0px; color: rgb(80, 161, 79); overflow-wrap: break-word;">"rows"</span>:[{<span class="hljs-string" style="box-sizing: border-box; outline: 0px; color: rgb(80, 161, 79); overflow-wrap: break-word;">"cols"</span>:<span class="hljs-string" style="box-sizing: border-box; outline: 0px; color: rgb(80, 161, 79); overflow-wrap: break-word;">"name1"</span>}]</code></div> </div> </li> <li style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px; list-style-type: none; overflow-wrap: break-word; height: 22px;"> <div class="hljs-ln-numbers" style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px; overflow-wrap: break-word; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 14px; float: left; height: 22px; width: 24px; border-right: 1px solid rgb(197, 197, 197);"> <div class="hljs-ln-line hljs-ln-n" data-line-number="3" style="box-sizing: border-box; outline: 0px; padding: 0px 8px 0px 0px; margin: 0px; text-align: right; overflow-wrap: normal;"> </div> </div> <div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 0px 8px; overflow-wrap: break-word; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px; overflow-wrap: break-word;"><code class="language-javascript hljs" style="box-sizing: border-box; outline: 0px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; display: block; overflow-x: auto; padding: 8px; color: rgb(56, 58, 66); background: rgb(250, 250, 250); border-radius: 4px; line-height: 22px; white-space: pre; overflow-wrap: break-word;">}}</code></div> </div> </li>
也就是angular的ajax没有对数据进行处理，最坑的是所以和angular有关的都没有提到这个问题，官网也没有说，简直太坑了，如果自己去试的话，没有个十天八天的估计是找不到思路，遇到这种问题，解决的方法就是在发送数据之前进行序列化就好了，并且要设置请求头
-
<div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 0px 8px; overflow-wrap: break-word; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px; overflow-wrap: break-word;"><code class="language-javascript hljs" style="box-sizing: border-box; outline: 0px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; display: block; overflow-x: auto; padding: 8px; color: rgb(56, 58, 66); background: rgb(250, 250, 250); border-radius: 4px; line-height: 22px; white-space: pre; overflow-wrap: break-word;"><span class="hljs-keyword" style="box-sizing: border-box; outline: 0px; color: rgb(166, 38, 164); overflow-wrap: break-word;">let</span> headers = {</code></div> </div> </li> <li style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px; list-style-type: none; overflow-wrap: break-word; height: 22px;"> <div class="hljs-ln-numbers" style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px; overflow-wrap: break-word; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 14px; float: left; height: 22px; width: 24px; border-right: 1px solid rgb(197, 197, 197);"> <div class="hljs-ln-line hljs-ln-n" data-line-number="2" style="box-sizing: border-box; outline: 0px; padding: 0px 8px 0px 0px; margin: 0px; text-align: right; overflow-wrap: normal;"> </div> </div> <div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 0px 8px; overflow-wrap: break-word; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px; overflow-wrap: break-word;"><code class="language-javascript hljs" style="box-sizing: border-box; outline: 0px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; display: block; overflow-x: auto; padding: 8px; color: rgb(56, 58, 66); background: rgb(250, 250, 250); border-radius: 4px; line-height: 22px; white-space: pre; overflow-wrap: break-word;"><span class="hljs-attr" style="box-sizing: border-box; outline: 0px; color: rgb(152, 104, 1); overflow-wrap: break-word;">headers</span>: <span class="hljs-keyword" style="box-sizing: border-box; outline: 0px; color: rgb(166, 38, 164); overflow-wrap: break-word;">new</span> HttpHeaders({</code></div> </div> </li> <li style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px; list-style-type: none; overflow-wrap: break-word; height: 22px;"> <div class="hljs-ln-numbers" style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px; overflow-wrap: break-word; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 14px; float: left; height: 22px; width: 24px; border-right: 1px solid rgb(197, 197, 197);"> <div class="hljs-ln-line hljs-ln-n" data-line-number="3" style="box-sizing: border-box; outline: 0px; padding: 0px 8px 0px 0px; margin: 0px; text-align: right; overflow-wrap: normal;"> </div> </div> <div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 0px 8px; overflow-wrap: break-word; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px; overflow-wrap: break-word;"><code class="language-javascript hljs" style="box-sizing: border-box; outline: 0px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; display: block; overflow-x: auto; padding: 8px; color: rgb(56, 58, 66); background: rgb(250, 250, 250); border-radius: 4px; line-height: 22px; white-space: pre; overflow-wrap: break-word;"><span class="hljs-string" style="box-sizing: border-box; outline: 0px; color: rgb(80, 161, 79); overflow-wrap: break-word;">'Content-Type'</span>: <span class="hljs-string" style="box-sizing: border-box; outline: 0px; color: rgb(80, 161, 79); overflow-wrap: break-word;">"application/x-www-form-urlencoded;charset=UTF-8"</span></code></div> </div> </li> <li style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px; list-style-type: none; overflow-wrap: break-word; height: 22px;"> <div class="hljs-ln-numbers" style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px; overflow-wrap: break-word; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 14px; float: left; height: 22px; width: 24px; border-right: 1px solid rgb(197, 197, 197);"> <div class="hljs-ln-line hljs-ln-n" data-line-number="4" style="box-sizing: border-box; outline: 0px; padding: 0px 8px 0px 0px; margin: 0px; text-align: right; overflow-wrap: normal;"> </div> </div> <div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 0px 8px; overflow-wrap: break-word; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px; overflow-wrap: break-word;"><code class="language-javascript hljs" style="box-sizing: border-box; outline: 0px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; display: block; overflow-x: auto; padding: 8px; color: rgb(56, 58, 66); background: rgb(250, 250, 250); border-radius: 4px; line-height: 22px; white-space: pre; overflow-wrap: break-word;">})</code></div> </div> </li> <li style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px; list-style-type: none; overflow-wrap: break-word; height: 22px;"> <div class="hljs-ln-numbers" style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px; overflow-wrap: break-word; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 14px; float: left; height: 22px; width: 24px; border-right: 1px solid rgb(197, 197, 197);"> <div class="hljs-ln-line hljs-ln-n" data-line-number="5" style="box-sizing: border-box; outline: 0px; padding: 0px 8px 0px 0px; margin: 0px; text-align: right; overflow-wrap: normal;"> </div> </div> <div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 0px 8px; overflow-wrap: break-word; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px; overflow-wrap: break-word;"><code class="language-javascript hljs" style="box-sizing: border-box; outline: 0px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; display: block; overflow-x: auto; padding: 8px; color: rgb(56, 58, 66); background: rgb(250, 250, 250); border-radius: 4px; line-height: 22px; white-space: pre; overflow-wrap: break-word;">};</code></div> </div> </li>
网上有一些关于post传参的方法，但是那些都不能解决由json转为form Data的问题
若果是get方法传参，要这样用：
参数序列化还有一种方法，就是es6的URLSearchParams，这种方法有兼容性，具体用法可以去搜索官网，网上也有朋友贴出这个方法的使用，但不是在angular6中，而是在vue的axios中使用，
https://blog.csdn.net/qq_34629352/article/details/78397549
本人已亲自验证过，angular6中不能使用此方法，拿不到数据，或许是我使用的方法不对，如果有朋友用这个方法解决了请在本文下方评论留言
总之，angular的ajax就是个大坑