1

Estou desenvolvendo um app com Ionic e usando Lumen na API do backend. Estou tendo problemas com 'CORS', já configurei o servidor (tanto usando o servidor interno do PHP quanto o Apache, e o mesmo erro ocorre nos dois) criando um middleware para CORS que acrescenta as opções ao header como não funcionou desabilitei esse middleware e instalei o middleware disponível nesse projeto barryvdh/laravel-cors configurei o coloquei para rodar conitnua apresentando erro fazendo a chamada à API através do app ionic. Se faço um teste utilizando o Postman o teste é realizado normalmente e é possível perceber que os cabeçalhos do header aparecem como deveriam. Fiz diversas buscas e todas remetem a configuração do CORS nos headers das respostas que o servidor envia. Realmente não tenho mais ideia de onde o problema pode estar. Abaixo seguem os códigos e imagem dos erros. Imagem do erro após chamada no ionic

O código do middleware que eu mesmo criei:


namespace App\Http\Middleware;

use Closure;

class CorsMiddleware
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        return $next($request)
            ->header('Access-Control-Allow-Headers', "Origin, X-Requested-With, Content-Type, Accept")
            ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
            ->header('Access-Control-Allow-Origin', '*')
            ->header('Access-Control-Allow-Credentials', true);
    }
}

Como o código acima não funcionou desativei esse middleware e instalei o middleware do projeto barryvdh/laravel-cors. No arquivo app.php adicionei as linhas:


$app->routeMiddleware([
     'cors' => \Barryvdh\Cors\HandleCors::class
 ]);
$app->configure('cors');
$app->register(\Barryvdh\Cors\ServiceProvider::class);

O header da response com o middleware que eu criei fazendo o request pelo Postman é o da figura abaixo:

inserir a descrição da imagem aqui

E utilizando o middleware do projeto barryvdh/laravel-cors é a figura abaixo:

inserir a descrição da imagem aqui

Para finalizar vou colocar a chamada à API como está no app Ionic (o app ionic está redando sob http://localhost:8100):


avancar(){
    this.http.post('http://localhost/api/public/clientes/novo', this.data)
      .map(res => res.json())
      .subscribe(
        res => console.log(res),
        error => console.log(error)
      );
    this.navCtrl.setRoot(ConfirmacaoPage);
  }

Obrigado à todos!

1
  • Após alguns testes percebi que se rodar o app diretamente no celular funciona mas no navegador não. Vou manter a pergunta pois alguém pode saber o motivo de não funcionar nos navegadores. Obs.: o middleware está configurado nas rotas. Commented 20/11/2017 às 13:10

3 Respostas 3

0

Utilize o Chrome Canary e desative a flag de verificação de CORS no momento de abertura do aplicativo.

Estou em um ambiente UNIX, utilizo o seguinte alias dentro do meu bash_profile para abrir:

alias canary="open -a /Applications/Google\ Chrome\ Canary.app --args --disable-web-security --user-data-dir=$HOME/canary"

Percebi que você está no Windows, então acredito que as flags necessárias para desabilitar são passadas nas propriedades do atalho que linka ao executável do Chrome Canary.

Não consegui fazer funcionar dessa forma com o Chrome normal, porém utilizava uma extensão que funcionava, mudei apenas por facilidade mesmo.

1
  • Não estou no windows, estou no linux. Mas utilizei a extensão e funcionou. Mas é engraçado pq mesmo adicionando os headers que permitem o CORS ele não funciona no navegador mas funciona no APP. De todo modo utilizando a extensão resolve o problema para testar o código feito com ionic. Commented 11/12/2017 às 20:36
0

O que é CORS?

  • CORS define um meio pelo qual um navegador e um servidor web podem interagir para determinar se devem ou não utilizar/permitir requisições cross-origem.

Quando é realizado uma validação CORS?

  • Quando a origem é diferente e/ou quando o header da requisão é adicionado novos parâmetro (Ex: tokenAPI, userAPI).

Partindo disso, subentendemos que você está realizando uma chamada de um servidor X para uma API em um servidor Y ou adicionando algum parâmetro customizado no header.

Nesse momento, o framework está realizando uma chamada OPTIONS passando a ORIGEM e os parâmetros adicionais no HEADER (Se existirem) para o endpoint do request.

É nesse request OPTION que o framework valida se o servidor aceita ou não a requisição.

Pelo primeiro print demostrado, sua API não responde para method OPTION. Você precisa implementar esse método com as validações de response:

Access-Control-Allow-Methods : OPTIONS, GET, POST, PUT, DELETE
Access-Control-Allow-Headers : origin, content-type, accept, userAPI(Parâmetro customizado), tokenAPI(Parâmetro customizado)
Access-Control-Allow-Origin  : *
-1

Opa, vamos por partes: - O middleware do projeto barryvdh/laravel-cors, quando adicionado de forma não global tem que ser adicionado nas rotas, via route group ou individualmente;

  • No Ionic, você não especificou a versão, lembro-me que existe a white list, na qual você tem que por o domínio na qual o mesmo poderá fazer chamadas http.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .