Angular 2中HTTP POST请求失败，Token认证登录遇“Unexpected end of input”错误

嘿，我来帮你分析下这个问题！首先说结论：你传递的请求参数结构看起来完全符合预期，返回“Unexpected end of input”错误通常不是参数本身的问题，大概率是请求的格式设置、序列化方式，或者服务器端的响应处理出了问题，咱们一步步来排查：

1. 检查请求头的Content-Type设置 #

Angular 2的Http模块（注意不是后来的HttpClient）默认不会自动设置Content-Type为application/json，而很多后端服务会要求这个头来识别JSON格式的请求体。如果没设置，服务器可能无法正确解析你的请求，甚至返回空响应，导致客户端解析时出现“Unexpected end of input”。

你需要手动添加请求头：

import { Http, Headers, RequestOptions } from '@angular/http';

// 在你的服务方法里
const headers = new Headers({
  'Content-Type': 'application/json'
});
const options = new RequestOptions({ headers: headers });

2. 确保请求体被正确序列化 #

虽然Angular 2的Http.post理论上会自动把JS对象序列化为JSON，但如果没搭配正确的Content-Type头，可能会出问题。保险起见，你可以手动把请求体转成JSON字符串：

const requestBody = JSON.stringify({
  type: "auth",
  user: "asdf",
  pass: "asdf"
});

// 然后在post请求里使用这个字符串作为body
this.http.post('你的服务器登录接口地址', requestBody, options)

3. 用工具测试服务器端是否正常响应 #

这个错误也可能是服务器端的问题——比如服务器没正确处理你的请求，返回了空响应或者非JSON格式的内容，导致客户端解析失败。

你可以用curl或者Postman模拟相同的请求，验证服务器是否返回预期的响应：

curl -X POST -H "Content-Type: application/json" -d '{"type":"auth","user":"asdf","pass":"asdf"}' http://你的服务器接口地址

如果返回的不是你预期的{"code":200,"name":"adsf asdf","token":"asdfasdfasdfasdfdsf"}，那问题就出在服务器端，需要后端同学排查。

4. 完善错误处理，获取更详细的错误信息 #

你可以在订阅请求时添加错误回调，打印更详细的错误细节，帮助定位问题：

this.yourAuthService.login().subscribe(
  response => console.log('响应:', response),
  error => {
    console.error('完整错误信息:', error);
    console.error('错误状态码:', error.status);
  }
);

完整的Angular 2登录服务示例 #

这里给你一个标准的登录服务实现，你可以对照调整：

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

@Injectable()
export class AuthService {
  private loginUrl = '你的服务器登录接口地址';

  constructor(private http: Http) {}

  login(username: string, password: string): Observable<any> {
    const body = JSON.stringify({
      type: 'auth',
      user: username,
      pass: password
    });
    const headers = new Headers({ 'Content-Type': 'application/json' });
    const options = new RequestOptions({ headers: headers });

    return this.http.post(this.loginUrl, body, options)
      .map(res => res.json())
      .catch(err => Observable.throw(err));
  }
}

总结一下：你的请求参数结构是对的，重点排查请求头设置、序列化方式，以及服务器端的响应是否符合预期。按照上面的步骤调整后，应该能解决这个问题。

内容的提问来源于stack exchange，提问作者Vinay Anand