Angular 7中Http Post登录返回无效响应，参数传递是否正确？

我一眼就看到几个可能导致你登录失败的关键问题，咱们一个个来排查修复：

1. 错误的参数分隔符（最核心问题） #

你手动构造表单数据时用了&，这是HTML实体编码后的&符号，服务器接收到的参数会变成这样：

username=xxx&password=yyy

这意味着服务器识别到的第二个参数是amp;password而不是password，自然拿不到正确的密码，直接返回登录错误。

你需要把&替换成普通的&：

// 错误写法
const formData = `username=${username}&password=${password}`;
// 正确写法
const formData = `username=${username}&password=${password}`;

2. URL末尾的多余编码符号 #

你的请求URL里写了?action=login&，这里的&同样是错误的，而且末尾多了一个无用的&，应该改成：

`${this.baseUrl}?action=login`

3. 推荐用Angular的HttpParams构造表单数据 #

手动拼接字符串很容易踩坑（比如参数包含特殊字符时会编码错误），Angular提供了HttpParams来专门处理application/x-www-form-urlencoded类型的参数，更可靠也更规范：

import { HttpParams } from '@angular/common/http'; // 记得导入HttpParams

// ...

const formParams = new HttpParams()
  .set('username', username)
  .set('password', password);

const options = { 
  headers: new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' }) 
};

return this.http.post<any>(`${this.baseUrl}?action=login`, formParams, options)
.pipe(map(response => {
  console.log('user is', response);
  if (response && response.session && response.session.id) {
    localStorage.setItem('currentUser', JSON.stringify(response));
    this.currentUserSubject.next(response);
  }
  return response;
}));

用HttpParams的话，Angular会自动帮你处理参数编码，完全和Postman的参数传递方式对齐，服务器就能正确识别用户名和密码了。

内容的提问来源于stack exchange，提问作者Nidhin Kumar