从 AngularJS 升级时，Angular 6 上的 HttpClient POST 失败答案

【问题标题】：HttpClient POST fails on Angular 6 when upgrading from AngularJS从 AngularJS 升级时，Angular 6 上的 HttpClient POST 失败
【发布时间】：2019-02-25 23:53:02
【问题描述】：

我正在将我的应用程序从 Angular 1.6 升级到 Angular 6，但我卡在了登录屏幕中。下面是我正在尝试做的代码 sn-p -

const body = new URLSearchParams();
body.set('username', 'admin')
body.set('password', 'admin');

this.http.post('/log-in',
  body,
  {
    headers: new HttpHeaders()
      .set('Content-Type', 'application/x-www-form-urlencoded')
  }
).subscribe((response: Response) => {
  // Do something here 
}

这是我得到的错误，即使服务器的响应是 200 -

SyntaxError: Unexpected token < in JSON at position 0
at JSON.parse (<anonymous>)
at XMLHttpRequest.onLoad (http.js:1514)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Object.onInvokeTask (core.js:3811)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:498)
at invokeTask (zone.js:1744)
at XMLHttpRequest.globalZoneAwareCallback (zone.js:1781)

显然，预期的响应是 JSON，但我收到的是 HTML 页面

{error: SyntaxError: Unexpected token < in JSON at position 0
at JSON.parse (<anonymous>)   
at XMLHtt…, text: "<!DOCTYPE html>↵<html lang="en" layout ng-app="pfs…rc="scripts/index.js"></script>↵↵</body>↵</html>↵"}

我进行了很多搜索以找出解决此问题的方法，但到目前为止还没有取得任何进展。尝试了

中的建议

HttpClient POST request using x-www-form-urlencoded

How to force Angular2 to POST using x-www-form-urlencoded

但它都没有解决问题。我还尝试更改 httpOptions 的 responseType 并仍然面临相同的错误。

这是工作 AngularJS (1.6) 代码 -

var postHeaders = {
  'Content-Type': 'application/x-www-form-urlencoded'
};    

$http({
      method: 'POST',
      url: '/log-in',
      data: $httpParamSerializerJQLike(
        {username: username, password: password}),
      headers: postHeaders,
    }).then(function (success) {
      // Do something
    }

非常感谢任何帮助。

【问题讨论】：

标签： angularjs angular angular-httpclient

【解决方案1】：

这很可能是因为您发布到后端的内容格式不正确，因此引发错误并返回 HTML 页面。您不应该发送 URLSearchParams 对象作为您的 body，您应该发送常规对象：

const body = {
    username: 'admin',
    password: 'admin',
};

【讨论】：

我尝试了上述建议以及我添加到我的问题的链接中的 stackoverflow 答案中的其他两个建议 - 其中之一就是您在我的问题中看到的内容。都没有奏效。但我发现我需要做些什么才能让它发挥作用。我将在下面发布它作为答案。谢谢你的建议。

【解决方案2】：

完成此操作后，我能够完成这项工作 - 我必须将以下 responseType 添加到我的选项中

return this.http.post('http://localhost/api/v1/log-in',
  body, { responseType: 'text' as 'json' }
)

之前，当我将 responseType 添加为“文本”时，我不断收到关于类型不匹配的错误。我的关键是将其设置为 'text' as 'json'。

【讨论】：