Angular HttpClient “Falha de Http durante a análise”

106

Tento enviar uma solicitação POST do Angular 4 para o meu back-end do Laravel.

Meu LoginService tem este método:

login(email: string, password: string) {
    return this.http.post(`http://10.0.1.19/login`, { email, password })
}

Eu me inscrevo neste método em meu LoginComponent:

.subscribe(
    (response: any) => {
        console.log(response)
        location.reload()
    }, 
    (error: any) => {
        console.log(error)
    })

E este é o meu método de backend do Laravel:

...

if($this->auth->attempt(['email' => $email, 'password' => $password], true)) {
  return response('Success', 200);
}

return response('Unauthorized', 401);

Minhas ferramentas de desenvolvimento do Chrome dizem que minha solicitação foi um sucesso com 200 códigos de status. Mas meu código Angular aciona o errorbloqueio e me dá esta mensagem:

Falha de HTTP durante a análise para http://10.0.1.19/api/login

Se eu retornar uma matriz vazia do meu back-end, funciona ... Então o Angular está tentando analisar minha resposta como JSON? Como posso desativar isso?

angular typescript angular-httpclient

— nutzt
fonte

234

Você pode especificar que os dados a serem retornados não são JSON usando responseType.

Em seu exemplo, você pode usar um responseTypevalor de string text, como este:

return this.http.post(
    'http://10.0.1.19/login',
    {email, password},
    {responseType: 'text'})

A lista completa de opções para responseTypeé:

json (o padrão)
text
arraybuffer
blob

Veja a documentação para mais informações.

— Kirk Larkin
fonte

17

se você tem opções

return this.http.post(`${this.endpoint}/account/login`,payload, { ...options, responseType: 'text' })

— Trần Quang Hiệp
fonte

3

Mesmo adicionando responseType, lidei com isso por dias sem sucesso. Finalmente entendi. Certifique-se de que em seu script de back-end você não defina o cabeçalho como - ("Content-Type: application / json);

Porque se você transformar em texto, mas o backend pedir json, ele retornará um erro ...

— Shemi
fonte

Além disso, você pode definir como parâmetros para um novo objeto derivado de uma nova classe. em seguida, retorne esse objeto como resposta. ou seja, você pode alterar sua resposta para o formato JSON

— whitefang

1

Você também deve verificar o JSON (não no DevTools, mas em um back-end). Angular HttpClient está tendo dificuldade em analisar JSON com \0caracteres e DevTools irá ignorar então, então é muito difícil de detectar no Chrome.

Com base neste artigo

— drussa
fonte

1

Eu tive o mesmo problema e a causa foi Que na hora de retornar uma string em seu backend (mola) você pode estar retornando como retorno "mola usada"; Mas isso não é analisado corretamente de acordo com a primavera. Em vez disso, use return "\" spring used \ ""; - Paz

— AVI
fonte

Da avaliação: Olá, esta postagem não parece fornecer uma resposta de qualidade para a pergunta. Edite sua resposta e melhore-a ou apenas poste-a como um comentário.

— sɐunıɔ ןɐ qɐp

Tudo bem..SO por exemplo. na minha situação, eu estava usando Spring como backend e Angular como frontend. Após a autenticação correta, meu servidor Spring tem que me retornar uma string "válida" que é processada somente se as informações de login estiverem corretas.

— AVI

O problema com meu programa era semelhante, ou seja. Falha de Http durante a análise .... Então eu percebi que a primavera está considerando "minha resposta do servidor como um caractere especial. Portanto, eu tive que retornar uma string que o backend também pode entender ... Então eu retornei" \ "válido \" " em vez de "válido" e \ notação na web é usado para especificar um "(coma invertido) escrito dentro das vírgulas invertidas da string {" \ "\" "ao invés de" "" "}. E depois que o erro não estava em lugar nenhum ... Espero que esteja mais claro agora @ sɐunıɔ ןɐ qɐp

— AVI

0

Eu estava enfrentando o mesmo problema em meu aplicativo Angular. Eu estava usando a API REST RocketChat em meu aplicativo e estava tentando usar o rooms.createDiscussion, mas ocorreu um erro conforme abaixo.

ERROR Error: Uncaught (in promise): HttpErrorResponse: {"headers":{"normalizedNames":{},"lazyUpdate":null},"status":200,"statusText":"OK","url":"myurl/rocketchat/api/v1/rooms.createDiscussion","ok":false,"name":"HttpErrorResponse","message":"Http failure during parsing for myrul/rocketchat/api/v1/rooms.createDiscussion","error":{"error":{},"text":"

Eu tentei algumas coisas como mudar o, responseType: 'text'mas nenhuma funcionou. No final, descobri que o problema estava na instalação do RocketChat. Conforme mencionado no log de alterações do RocketChat, a APIrooms.createDiscussion foi introduzida na versão 1.0.0, infelizmente eu estava usando uma versão anterior.

Minha sugestão é verificar se a API REST está funcionando bem ou não antes de gastar algum tempo para corrigir o erro em seu código Angular. Usei o curlcomando para verificar isso.

curl -H "X-Auth-Token: token" -H "X-User-Id: userid" -H "Content-Type: application/json" myurl/rocketchat/api/v1/rooms.createDiscussion -d '{ "prid": "GENERAL", "t_name": "Discussion Name"}'

Também estava recebendo um HTML inválido como resposta.

<!DOCTYPE html>
<html>
<head>
<meta name="referrer" content="origin-when-crossorigin">
<script>/* eslint-disable */

'use strict';
(function() {
        var debounce = function debounce(func, wait, immediate) {

Em vez de uma resposta JSON válida como segue.

{
    "discussion": {
        "rid": "cgk88DHLHexwMaFWh",
        "name": "WJNEAM7W45wRYitHo",
        "fname": "Discussion Name",
        "t": "p",
        "msgs": 0,
        "usersCount": 0,
        "u": {
            "_id": "rocketchat.internal.admin.test",
            "username": "rocketchat.internal.admin.test"
        },
        "topic": "general",
        "prid": "GENERAL",
        "ts": "2019-04-03T01:35:32.271Z",
        "ro": false,
        "sysMes": true,
        "default": false,
        "_updatedAt": "2019-04-03T01:35:32.280Z",
        "_id": "cgk88DHLHexwMaFWh"
    },
    "success": true
}

Assim, após atualizar para o RocketChat mais recente , consegui usar a API REST mencionada.

— Sibeesh Venu
fonte