Ionic & Angular: Fazendo o CORS seu amigo

Hiago Souza

Sou o Hiago, tenho 23 anos. Moro em São José do Rio Preto, interior de São Paulo. Sou formado em Analise e Desenvolvimento de Sistemas pela UNIP. Atualmente estou me especializando em Consultoria Web pela Fatec Rio Preto. Sou entusiasta em desenvolvimento mobile/web, open-source e linux. E atuo profissionalmente com tecnologia desde 2013. Estudo cloud e eletrônica há algum tempo, e levo isso como um hobby.

Você pode gostar...

13 Resultados

  1. Bruno disse:

    Olá, Higor!
    Muito bacana o post, consegui entender bem o problema.
    Acontece que optei por liberar o CORS para o http://localhost:8080 e ainda assim não funcionou.
    O curioso é que quando libero para todos os domínios, funciona corretamente.
    Sabe se a porta que o ionic usa mudou?
    Muito obrigado!

    • Hiago Souza disse:

      Bom dia Bruno tudo bem? A porta 8080 é quando o app está compilado, caso você esteja rodando o ionic no seu browser em modo de desenvolvimento a porta utilizada será a partir da porta 8100. Eu não vi como tá a nova versão do ionic, então se estiver utilizando ela pode ser que realmente tenha mudado algo por conta do capacitor. Mas vou ver isso para você, onde acontece o erro? No dispositivo ou no seu navegador (utilizando o ionic serve)?

      • Bruno disse:

        Hiago, perdão por errar seu nome. Acontece em ambos. Quando faço o proxy para a porta 8100, roda certinho no browser, mas quando mudo para a porta 8080 e mando rodar no android real, simplesmente não vai. Quando libero totalmente, todos conseguem acessar…

        • Hiago Souza disse:

          Sem problemas Bruno, acontece ;)!! A configuração de proxy é válida apenas para ambiente de desenvolvimento. Quando compila o App o proxy do node não é considerado, você pode inspecionar o webview do aplicativo rodando utilizando a url “chrome://inspect” (isso com o dispositivo plugado no computador). Veja qual erro aparece no console e me encaminhe aqui. As vezes a porta local onde o app roda foi modificada nas versões recentes do ionic.

  2. Vinicius Araujo disse:

    Olá,
    Estou desenvolvendo um app que tratei o problema de cors com a configuração de proxy o que faz tudo funcionar direitinho no meu navegador. Fui testar no dispositivo real através do apk e não funciona. Rodei no inspect para ver o que estava ocorrendo e minha requisição traz 200 ok mas como body vazio. Coloquei para acessar a requisição direto da url da api que preciso pegar as informações e caiu no cors de novo (XMLHttpRequestProgressEvent). Pode me ajudar com isso?

    • Hiago Souza disse:

      Olá Vinícius boa noite, qual é a versão do seu ionic? Qual a URL que o app chamou? Manda aqui que vou te orientar.

      • Vinicius Araujo disse:

        Olá Hiago, infelizmente não tenho permissão de compartilhar a URL. Eu estou usando a versão 4.2.1. Em resumo, o problema que tenho é de que o apk não faz as requisições e debugando apareceu o problema de cors. No navegador roda direitinho com o proxy configurado, já no dispositivo não roda nem com proxy e nem sem proxy.

        • Hiago Souza disse:

          Vinicius, considere fazer a liberação de CORS nesse caso. O proxy é apenas em desenvolvimento, na versão 4 eu não sei se houve alguma mudança nisso, eles mudaram do Cordova para o Capacitor talvez o melhor seja você fazer a liberação do CORS no seu endpoint.

  3. André B. disse:

    Hiago, boa noite.

    Estou com esse problema de cors quando gero o apk e jogo celular. já usei o inspect.

  4. Rafael Moura disse:

    Noa noite Hiago, estou com uma dúvida, não consegui resolve essa questão, tenho minha aplicação Laravel/Angular, tudo certo por lá, consigo integrar a fazer as requisições de boa, mas no ionic (v4), fiz de tudo e ele cai justamente nesse problema com o CORS, por ex, minha API é assim: http://127.0.0.1:8000/api/v1/login, detalhe, eu estou rodando no “lab” do Ionic na porta 8200 (abre automaticamente) e ele dá problema na 8100, olha o erro:

    Access to XMLHttpRequest at ‘http://127.0.0.1:8000/api/v1/login’ from origin ‘http://localhost:8100’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

    • Hiago Souza disse:

      Olá Rafael, no ionic 4 você já pode fazer uso dos proxies do angular se não me engano. Eu vou criar um novo post sobre o assunto e associo com esse beleza?

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

você está offline

Esse blog utiliza cookies para fornecer uma melhor experiência ao usuário. Ao navegar pelo site você concorda com a nossa Política de Privacidade e Cookies e autoriza a inserção de cookies no seu dispositivo.