Angular4 - 返回的HTTP错误是一个字符串而不是一个对象

Question

我正在 Angular 4 中使用其内置 HttpClient class 执行 Http 请求。一切正常，但是返回的错误变量有一个小问题。

当我 post 错误的 username/password 组合登录用户时，返回的错误对象包含一个 error 键，其值应为 Object 但我得到的是 string。请查看下面对象中 ** 之间的文本以了解问题所在：

{**error: "{"non_field_errors":["Unable to login with provided credentials."]}"**, headers: Object, status: 400, statusText: "Bad Request", url: "http://mymedicine.loc/api/auth/login/", ok: false, name: "HttpErrorResponse", message: "Http failure response for http://project.loc/api/auth/login/: 400 Bad Request"}

什么可能导致这种问题？我需要在那里有一个对象，这样我就可以让用户知道在身份验证过程中出了什么问题。我需要明确指出，当提供了正确的凭据并且我已在发送 HTTP 请求的网络服务器上激活 CORS 时，身份验证工作正常。

下面是提取的一小段代码，它执行 POST http 请求：

interface ErrorMessage {
    username: string[1];
    password: string[1];
    non_field_errors: string[1];
}

interface ErrorResponse {
    error: ErrorMessage;
}

// get token from the server
this.http.post<TokenResponse>('http://myproject.loc/api/auth/login/', body).subscribe(
    (res: TokenResponse) => {
        // login with token
        this.auth.login(res.auth_token);

        // redirect
        this.router.navigateByUrl('/url');
    },
    (err: ErrorResponse) => {
        let error = err.error;
        console.dir(err);
    }
);

Answer 1

尝试在 post 请求服务器

的 headers 中将 Content-Type 设置为 json

const headers = new HttpHeaders().set('Content-Type', 'application/json; charset=utf-8');   

return this.http.post<TokenResponse>('/api/auth/login/', body, {headers: headers})
           .map(res => {
                 return {token: res.auth_token};
           }).catch((error: HttpErrorResponse) => {
                 if (err.error) {
                     console.log(err.error);
                 }
                 return _throw(err);
        });

Answer 2

根据 source，此错误似乎已被 Angular 和 Angular-cli 的最新版本修复，但我没有使用 Angular 4.4.6。

Angular4 - 返回的HTTP错误是一个字符串而不是一个对象

Angular4 - Http error returned is a string instead of an object

angular

angular4-httpclient