Question

我正在Http使用内置Angular 4课程执行HttpClient请求。一切运作良好，但返回的错误变量存在一个小问题。

当我post错误的用户名/密码组合登录用户时，返回的错误对象包含一个error键，其值应为Object，但我＆＃ 39;取而代之的是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"}

可能导致此类问题的原因是什么？我需要在那里有一个对象，这样我就可以让用户知道在身份验证过程中出了什么问题。我需要确保在提供正确的凭据并且我已在网络服务器上激活CORS时，身份验证效果很好我将HTTP请求发送给。{/ p>

以下是提取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

尝试在服务器发布请求的标题中将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错误是字符串而不是对象

2 个答案: