Angular4 - Http ошибка возвращается строка вместо объекта

Question

Я делаю Http запрос в Angular 4 используя свой встроенный HttpClient учебный класс. Все работает хорошо, но есть небольшая проблема с возвращаемой переменной error.

Когда я post неправильная комбинация имени пользователя и пароля для входа в систему, возвращаемый объект ошибки содержит 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"}

Что может вызвать такие проблемы? Мне нужно, чтобы там был объект, чтобы я мог сообщить пользователю, что пошло не так во время аутентификации. Мне нужно уточнить, что аутентификация работает хорошо, когда предоставлены правильные учетные данные и что я активировал CORS на веб-сервере я отправляю HTTP просьба к.

Ниже приведен короткий фрагмент кода, который выполняет 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

Эта ошибка, кажется, была исправлена ​​в последних версиях Angular а также Angular-cli по словам источника, и у меня нет его с Angular 4.4.6,

Answer 2

Попробуйте установить 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);
        });