Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
6
respostas

Problemas com Factory

Referente ao curso AngularJS: crie webapps poderosas

por UNIVALLE SISTEMAS
| 95.8k xp | 18 posts

Bom dia.

Estou desenvolvendo uma aplicação que, em um dos campos do formulário, deve buscar o CEP numa API e me trazer os dados correspondentes a ele.

No entanto, estou me deparando com um problema que eu não estou conseguindo resolver.

No meu console do Chrome ele me aponta o seguinte erro:

XMLHttpRequest cannot load https://viacep.com.br/ws/12225430/json. Request header field If-Modified-Since is not allowed by Access-Control-Allow-Headers in preflight response.

Eu não sei o que devo fazer para corrigir o erro acima.

Essas são as configurações que estou usando no meu app.

Controller:

var app = angular.module('myApp', ['ngResource'])

          .controller('myCtrl', function($scope, myResource) {
               $scope.cep = "12225430", $scope.city = null;
               $scope.findCep = function () {
                 myResource.get({'cep': $scope.cep}).$promise
                 .then(function success(result){
                   $scope.city = result;
                 }).catch(function error(msg) {
                   console.error('Error');
                 });
                }
          })

Factory:

.factory('myResource', function ($resource) {
              var rest = $resource(
                'https://viacep.com.br/ws/:cep/json/',
                {
                  'cep': ''
                }
              );
              return rest;
          });

Se puderem me ajudar eu agradeço.

Obrigado.

6 respostas
por Flavio Henrique de Souza Almeida
| 3119.3k xp | 6969 posts
Instrutor Instrutor/Desenvolvedor Web Sênior/Autor

Você esta acessando uma api fora do seu domínio e isso só será permitido se quem criou a api suportou CORS.

por UNIVALLE SISTEMAS
| 95.8k xp | 18 posts

Mas o que acho estranho é que eu fiz isso em outra aplicação em angular e deu certo. Exatamente do jeito que está.

Fiz um teste usando o app que é mostrado no curso de AngularJS, ALURAPIC, e nele funcionou tranquilamente esse acesso a essa API externa.

por Flavio Henrique de Souza Almeida
| 3119.3k xp | 6969 posts
Instrutor Instrutor/Desenvolvedor Web Sênior/Autor

Bizarro. Agora quem ficou curioso fui eu. Pelo menos a mensagem de erro indica que o header If-Modified-Since esta sendo recusado. Se você diz que funcionou, você depois colocou alguma info especial nos header ?

por UNIVALLE SISTEMAS
| 95.8k xp | 18 posts

Não coloquei nada demais no header. Na verdade essa é outra dificuldade que eu tenho, mas acho que não vem ao caso agora. No app que estou tentando implementar isso eu uso várias outras coisas além do próprio Angular, por exemplo, GRUNT, BOWER, RUBY ON RAILS. Isso pode interferir de alguma forma para esse problema?

por Flavio Henrique de Souza Almeida
| 3119.3k xp | 6969 posts
Instrutor Instrutor/Desenvolvedor Web Sênior/Autor

A questão é habilitar CORS no sua api. Mas como você diz que funcionava antes eu já não sei o que pode ser.

solução!
por UNIVALLE SISTEMAS
| 95.8k xp | 18 posts

Consegui resolver fazendo a requisição na mesma API, mas usando outro método:

self.buscaCEP = function(){
                var xhr = new XMLHttpRequest();
                xhr.open('GET', 'https://viacep.com.br/ws/'+ self.model.zip_code + '/json/');

                xhr.addEventListener("load", function(){
                    var ceps = xhr.responseText;
                    var cep = JSON.parse(ceps);
                    self.model.address = cep.logradouro;
                    self.model.neighborhood = cep.bairro;
                });
                xhr.send();
        }

De qualquer forma obrigado pela ajuda. Espero que isso ajude alguém de alguma forma.