Entrar Ainda não tem acesso?
3
respostas

Ionic 4 fazendo http Post com PHP

por Miguel Ângelo Torino
| 105.6k xp | 6 posts

Estou com dificuldade em fazer um http.POST com o PHP. Ja tentei de varias formas, mas não funciona, sempre da um erro diferente.

Erro:

Failed to load http://www.amornamedida.com.br/coach/index.php/app/services: Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response.

No php:

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, OPTIONS, POST');
header('Access-Control-Allow-Headers: Content-Type, Content-Range, Content-Disposition, Content-Description');
var_dump($_POST);

No Ionic:

        let headers = new Headers();
        headers.append('Access-Control-Allow-Origin' , '*');
        headers.append('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT');
        headers.append('Content-Type', 'application/json');
        let options = new RequestOptions({ headers:headers});

        let paramData = {params: {teste:"valor-teste"};
    let urlservidor = 'http://www.amornamedida.com.br/coach/index.php/app/services';
        let retorno = this.http.post(
            urlservidor, paramData, options)
            .map((response) => this.parseResponse(response))
            .do(data => console.log('Retorno API: ', data))
            .catch(this.handleError)
            .finally(() => {

            });
3 respostas
por André Chaves
| 1967.1k xp | 2579 posts
Instrutor Lider técnico

Oi Miguel, tudo bom?

Uma boa abordagem, é você fazer a requisição em uma ferramenta mais robusta como o Postman e pegar o código dessa requisição em PHP pela ferramenta =)

No postman, você consegue traduzir uma requisição para varias linguagens clickando no link code, disposto abaixo do botão de enviar/salvar:

https://imgur.com/a/YLAtyUv

Da pra mandar pra algumas linguagens, inclusive PHP:

https://imgur.com/msyCk7G

Abraço

por Miguel Ângelo Torino
| 105.6k xp | 6 posts

Acho que não seu minha duvida com atenção.

Tem alguem ai da equipe que entende do assunto IONIC?

Quero saber sobre o ionic e do erro especificado, postman não tem e independente disso não iria resolver a questão.

por André Chaves
| 1967.1k xp | 2579 posts
Instrutor Lider técnico

Oi Miguel, na verdade a ideia era te trazer uma possível solução para montar a requisição em um ambiente independente da linguagem (e com configurações mais bem definidas) pra traduzir depois.

O seu problema:

Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response.

Acontece justamente por montar mal a requisição no server-side. Se ela fosse montada no Postman e traduzida pra linguagem que for você provavelmente não teria o mesmo problema.

De qualquer forma, o problema não está no Ionic porque ele representa o Client da sua aplicação e seu erro indica um problema no header do preflight, que aponta para um script PHP no qual os seguinte headers são definidos:

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, OPTIONS, POST');
header('Access-Control-Allow-Headers: Content-Type, Content-Range, Content-Disposition, Content-Description');
var_dump($_POST);

Em algum lugar. A ordem de definição desses Headers também é importante. Seria legal dar uma olhada melhor nesse código desse script pra dar uma opinião mais concreta.

De qualquer forma, pelo seu erro (e pela documentação da mozzila), se uma requisição preflight não possui os headers:

origin, x-requested-with

O servidor responde com erro.

O postman costuma montar essas configurações padrão em toda requisição quando a requisição é feita dentro da ferramenta. Então, quando você exporta pras linguagens isso já vem junto, o que evitaria seu problema.

Então, independente da linguagem na qual seu serviço foi desenvolvido, uma boa abordagem pra começar é liberar os headers que o preflight exige, já que seu erro é oriundo justamente disso.

Para definir esses Headers em PHP puro, é preferencial que as funções globais header() estejam o mais proximo da abertura do script possível:

<?php
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, OPTIONS, POST');
header('Access-Control-Allow-Headers: origin, x-requested-with,Content-Type, Content-Range, Content-Disposition, Content-Description');

// resto do código

Em frameworks MVC (que parece ser mais seu caso, já que há um sistema de rotas na URL do script), essa configuração costuma ficar mais isolada em algum xml/yml, dependendo do framework.

Ajustar os Headers deve resolver seu problema de preflight.

Qualquer problema é só falar.