Solucionado (ver solução)
Solucionado
(ver solução)
7
respostas

Classe HttpClient post

Boa noite estou usando a nova classe HttpClient do Ionic 3, para uma requisição. Criei o Metodo envia():

envia(usuario){
    let headers = new HttpHeaders();
    headers.set('Content-Type','application/json');
    return this.http.post(this._url, JSON.stringify(usuario),{headers:headers});      
  }

porém preciso passar no Request header que o content é JSON, como coloquei acima, mas ele aparece assim:

POST /api/usuario/integracao/v1 HTTP/1.1
Host: esm.escolaemmovimento.com.br
Connection: keep-alive
Content-Length: 483
Accept: application/json, text/plain, */*
Origin: http://localhost:8100
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36
Content-Type: text/plain
Referer: http://localhost:8100/
Accept-Encoding: gzip, deflate, br
Accept-Language: pt-BR,pt;q=0.9,en-US;q=0.8,en;q=0.7

e a API não aceito o content como text.

Obrigado

7 respostas
solução!

Boa noite, Andre! Como vai?

O seu código tem dois problemas! O primeiro é que vc não tem que utilizar o método JSON.stringfy() pq o HttpClient já resolve isso por baixo dos panos. Faça como eu fiz durante o curso passando apenas o seu objeto JavaScript! Além disso, o segundo problema, é que o HttpHeaders é imutável! Ou seja, fazer headers.set('Content-Type','application/json') irá te retornar um novo objeto HttpHeaders com a configuração que vc deseja, mas como vc não está salvando esse retorno em lugar nenhum, então ela é perdida e vc passa como parâmetro um HttpHeaders padrão sem a configuração que vc queria. Portanto, seu método deve ficar assim:

envia(usuario){
    let headers = new HttpHeaders()
                       .set('Content-Type','application/json');
    return this.http.post(this._url, usuario, { headers });      
}

EXTRA: A partir do ES6 não é preciso escrever { headers: headers }! Quando temos um objeto JavaScript com uma propriedade que tem o mesmo nome da variável que representa o seu valor, como nesse caso, podemos suprimir as duas declarações para apenas uma como fiz no código! Isso eu tbm mostro durante o treinamento, mas não é nenhuma novidade para quem fez os cursos de pré-requisito com o mestre Flávio Almeida!

Grande abraço e bons estudos, meu aluno!

Boa Tarde! Meu Professor, tudo bem sim. Muito boa sua didática em video aula.

Sobre a classe HttpHeaders entendi, se eu tivesse dados um console log no objeto teria reparado. Coloquei e usei como mencionou abaixo no "Extra" não precisa ser repetido se o objeto tem o mesmo nome.

O JSON.stringfy() utilizei pois em alguns momentos ele muda meu HttpClient.post() e vai como OPTION. Que é o que ocorreu agora fazendo desta forma, mas entendi que esta redundante. Tentei usar a classe FormData para ir como post mas também não deu certo. Quando coloco o Header ele envia os dados como OPTION

No aguardo e obrigado,

Obrigado pelo seu feedback, André! Fico feliz que tenha gostado do curso!

Normalmente quando vc faz uma requisição entre domínios diferentes primeiro ocorre uma requisição do tipo OPTIONS para fazer o que é chamado de handshake entre as partes (emissor e destinatário da requisição) e somente depois ocorre a sua requisição propriamente dita, que nesse caso é um POST. Ao que tudo indica, está tudo ok.

Caso esteja tendo algum erro, por favor, mande o log aqui que eu te ajudo a resolver!

Gabriel obrigado pela ajuda, vou enviar o erro mas acredito que o servidor recebe o Request Method Post e não OPTION, não sei se tem como.

Request URL: https://esm.escolaemmovimento.com.br/api/usuario/integracao/v1
Request Method: OPTIONS
Status Code: 405 Method Not Allowed
Remote Address: 35.161.12.10:443
Referrer Policy: no-referrer-when-downgrade
Allow: POST
Cache-Control: no-cache
Connection: keep-alive
Content-Length: 76
Content-Type: application/json; charset=utf-8
Date: Thu, 26 Apr 2018 20:44:50 GMT
Expires: -1
Pragma: no-cache
Server: Microsoft-IIS/8.0
X-AspNet-Version: 4.0.30319
X-Powered-By: ASP.NET
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: pt-BR,pt;q=0.9,en-US;q=0.8,en;q=0.7
Access-Control-Request-Headers: access-control-allow-origin
Access-Control-Request-Method: POST
Connection: keep-alive
Host: esm.escolaemmovimento.com.br
Origin: http://localhost:8100
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36
⚙ 3.js
localhost/build
⚙ roboto-bold.woff2
localhost/assets/fonts
pessoas.php
/webserviceESM
v1
esm.escolaemmovimento.com.br/api/usuario/integracao
v1
esm.escolaemmovimento.com.br/api/usuario/integracao

No Playload não aparece meu JSON.

Abraços

André, aparentemente o erro está na API por não suportar CORS e o método OPTIONS.

Vc terá que entrar em contato com quem administra a API e pedir para habilitar o CORS! Além disso, é importante procurar saber se o que está sendo esperado pela API é realmente um application/json para essa URL e método que vc está tentando utilizar.

Para mais informações sobre o que é o CORS, segue um link: https://developer.mozilla.org/pt-BR/docs/Web/HTTP/Controle_Acesso_CORS

Grande abraço e bons estudos, meu aluno!

Bom dia Gabriel,

Sobre a API esta certa, eu fiz um teste usando aquele aplicativo do Chrome ARC e deu certo. Vou tentar com o pessoal da API, só para confirmar, via IONIC existe alguma forma de enviar sem utilizar CORS? Não precisa me explicar como, pois pode ser complexo, mas apenas uma luz para que eu pesquise.

Muito obrigado mais uma vez. Até mais

Então, usando esses aplicativos de teste de API normalmente esse problema do CORS realmente não ocorre. Ele só se manifesta quando estamos fazendo requisições de aplicações reais.

Como o CORS é uma política de segurança, eu imagino que tenha sim uma forma de burlar ele, mas eu nunca procurei saber nada do tipo pq a boa prática é trabalhar junto com ele!

Converse com o pessoal da API que as coisas devem se resolver!

Grande abraço, André!