Como habilitar o CORS?

Oi Bruno.

Vc pode habilitar o CORS no config.xml adicionando essa tag aqui

<access origin="*"/>

Essa tag já está presente no arquivo config.xml, há outra maneira de solucionar o mesmo?

Entao acho q o problema nao é apenas no CORS.

Posta aqui pra gente o controller e o service q está acontecendo esse erro, por favor

OBS: esse problema de CORS só acontece quando a função da erro.

Segue abaixo a service e a controller.

angular.module('starter')
.service('CarroService', function( $http ) {

    var url = 'https://aluracar.herokuapp.com/';

    return {

        obterCarros : function() {
            return $http.get( url ).then( function( response ) {
                return response.data;
            });
        },

        salvarPedido : function( pedido ) {
            return $http.get( url + 'salvarpedido', pedido ).then( function( response ) {
                return 'Deu certo.';
                // return response.data;
            });
        }
    }
});

angular.module('starter')
.controller('FinalizarPedidoController', function( $stateParams, $scope, $ionicPopup, $state, CarroService ) {

    $scope.carroFinalizado = angular.fromJson( $stateParams.carro );

    $scope.pedido = {};

    $scope.finalizarPedido = function() {

        var pedidoFinalizado = {
            params : {
                carro          : $scope.carroFinalizado.nome,
                preco         : $scope.carroFinalizado.preco,
                nome          : $scope.pedido.nome,
                endereco     : $scope.pedido.endereco,
                email          : $scope.pedido.email
            }
        }

        CarroService.salvarPedido( pedidoFinalizado ).then( function( dados ) {

            console.log( dados );

            var alertPopup = $ionicPopup.alert({
                title : 'Parabéns',
                template : 'Você acaba de comprar um carro'
            });

            alertPopup.then( function() {
                $state.go('listagem');
            });

        }, function( erro ) {
            console.log( erro );

            $ionicPopup.alert({
                title : 'Deu erro',
                template : 'Campos obrigatórios'
            });
        });

    };
});

Estou tendo o mesmo problema, aguardando a solução.

Oi Fábio.

Como está enviando os dados pra API? Esse problema de CORS só acontece se vc está fazendo algo de errado no envio.

Eu até conferi com o código da aula e não entendi o que pode estar errado, conferi no postman o link get e funcionou corretamente, realmente não faço ideia do que pode ser. Segue o link do meu serviço :

angular.module('starter')
    .service('CarroService', function ($http) {

        var url = 'https://aluracar.herokuapp.com/';

        return {
            obterCarros: function () {
                return $http.get(url).then(function (response) {
                    return response.data;
                });
            },
            salvarPedido: function (pedido) {
                return $http.get(url + "salvarPedido", pedido).then(function (response) {
                    return "Deu certo."
                });
            }
        }
    });

Minha Controller:

angular.module('starter')
  .controller('RealizarPedidoController', function ($stateParams, $scope, $ionicPopup, $state, CarroService) {

    $scope.carroFinalizado = angular.fromJson($stateParams.carro);

    $scope.pedido = {};

    $scope.finalizarPedido = function () {

      var pedidoFinalizado = {
        params:
        {
          carro: $scope.carroFinalizado.nome,
          preco: $scope.carroFinalizado.preco,
          nome: $scope.pedido.nome,
          endereco: $scope.pedido.endereco,
          email: $scope.pedido.email
        }
      }

      CarroService.salvarPedido(pedidoFinalizado).then(function (dados) {

        $ionicPopup.alert({
          title: 'Parabéns',
          template: 'Você acabou de realizar um sonho, compra efetuada com sucesso!'
        }).then(function () {
          $state.go('listagem');
        });
      });

    };
  });

E meu template:

<ion-view>
    <ion-nav-title> Estamos quase lá...</ion-nav-title>
    <ion-content>
        <div class="card">
            <div class="item item-divider">
                <h2 style="text-align:center">{{carroFinalizado.nome}}</h2>
                <h3 style="text-align:center; color:green;">R{{carroFinalizado.preco | currency}}</h2>
            </div>
            <div class="item item-text-wrap">
                <div class="list">
                    <label class="item item-input item-stacked-label">
                    <span class="input-label">Nome Completo</span>
                    <input type="text" ng-model="pedido.nome" placeholder="Fulano da Silva Sauro">
                    </label>
                    <label class="item item-input item-stacked-label">
                    <span class="input-label">Endereço</span>
                    <input type="text" ng-model="pedido.endereco" placeholder="Rua X, Bairro y, Cidade Delta Z - IN">
                    </label>
                    <label class="item item-input item-stacked-label">
                    <span class="input-label">Email</span>
                    <input type="text" ng-model="pedido.email" placeholder="meuemail@dominio.com">
                    </label>
                </div>
            </div>
        </div>
        <a  class="button button-balanced button-full" ng-click="finalizarPedido()">Relizar um sonho!</a>
    </ion-content>
</ion-view>

Alguma novidade ? Onde está o professor do curso ? Conseguiu resolver Bruno?

Não resolvi isso ainda, dei continuidade no curso, mas este problema acabei ignorando, de qualquer forma, estou no aguardo de uma possível solução.

Olá.

Quando da erro no servidor, ele tenta lançar um excessao e ela não foi configurado o cors (erro meu).

Porém quando é enviado os dados certo, o cors está correto, então se ainda está com erro de cors, o erro está na chamada para o servidor.

Vou fazer a manutenção para tratar esse erro, mas vc consegue avançar com o curso mesmo assim.

Eu consegui resolver habilitando o CORS no meu Google Chrome com uma extensão. Mas não fiquei satisfeito não, foi bom para entender o conceito, mas caso fosse para produção, eu gostaria de saber como configura-lo corretamente. Fica aí minha sugestão para mais um módulo no curso apenas para configuração do CORS já que é algo essencial.

Fábio,

O erro do CORS é do lado do servidor, então não varia sentido uma parte do curso ensinando isso pois, como vc viu no curso, a gente não trabalhou no lado do servidor.

Não é preciso alterar nada no Google Chrome, basta enviar os dados corretamente para o servidor, pois a quando os dados estão corretos, o CORS está habilitado.

Pessoal, estou com o mesmo problema, ainda não consegui solucionar. O erro só acontece quando a função dá erro. Se preencher todos os dados funciona normal. Erro no console: ...

GET https://aluracar.herokuapp.com/salvarpedido?carro=Sentra+2.0&preco=53500 XMLHttpRequest cannot load https://aluracar.herokuapp.com/salvarpedido?carro=Sentra+2.0&preco=53500. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://192.168.25.7:8100' is therefore not allowed access. The response had HTTP status code 500.

...

Já verifiquei o meu config.xml, tem a tag

<access origin="*"/>

Conseguem me ajudar? Segue meu controller e meu service.js

angular.module('starter').controller('ListagemController', function ($scope, CarroService) {
    CarroService.obterCarros().then(function (dados) {
        $scope.listaDeCarros = dados;
    })
}).controller('CarroEscolhidoController', function ($stateParams, $scope) {
    $scope.carroEscolhido = angular.fromJson($stateParams.carro);
    $scope.listaDeAcessorios = [{
            "nome": "Freio ABS"
            , "preco": 800
    }, {
            "nome": "Ar-condicionado"
            , "preco": 1000
        }
        , {
            "nome": "MP3 Player"
            , "preco": 500
        }];
    $scope.mudou = function (acessorio, isMarcado) {
        if (isMarcado) {
            $scope.carroEscolhido.preco = $scope.carroEscolhido.preco + acessorio.preco;
        }
        else {
            $scope.carroEscolhido.preco = $scope.carroEscolhido.preco - acessorio.preco;
        }
    }
}).controller('FinalizarPedidoController', function ($stateParams, $scope, $ionicPopup, $state, CarroService) {
    $scope.carroFinalizado = angular.fromJson($stateParams.carro);
    $scope.pedido = {};
    $scope.finalizarPedido = function () {
        var pedidoFinalizado = {
            params: {
                carro: $scope.carroFinalizado.nome
                , preco: $scope.carroFinalizado.preco
                , nome: $scope.pedido.nome
                , endereco: $scope.pedido.endereco
                , email: $scope.pedido.email
            }
        };
        CarroService.salvarPedido(pedidoFinalizado).then(function (dados) {
            $ionicPopup.alert({
                title: "Parabéns"
                , template: 'Você acaba de comprar um carro!'
            }).then(function () {
                $state.go('listagem');
            });
        }, function (erro) {
            $ionicPopup.alert({
                title: 'Deu erro'
                , template: 'Campos obrigatórios'
            });
        });
    };
});

angular.module('starter').service('CarroService', function ($http) {
    var url = 'https://aluracar.herokuapp.com/';
    return {
        obterCarros: function () {
            return $http.get(url).then(function (response) {
                return response.data;
            });
        }
        , salvarPedido: function (pedido) {
            return $http.get(url + "salvarpedido", pedido).then(function (response) {
                return "Deu certo."
            });
        }
    }
});

Valeu

Vc não enviou o endereço no request. Olha o seu request

https://aluracar.herokuapp.com/salvarpedido?carro=Sentra+2.0&preco=53500

Veja no seu controller pq o endereço não está sendo populado. Todos os 3 campos devem ser enviados

Oi Lázaro, é isso mesmo. Agora eu consegui entender. Está tudo certo. Mas quando deixo os campos em branco, ele não popula na requisição e dá erro no servidor. Não é isso? Obrigado

Vc pode fazer um tratamento para não deixar o usuário mandar os dados em branco, por exemplo.

Com isso vc não faz a requisição quando os dados estiverem em branco

Oi pessoal. To com o mesmo problema. A minha url é:

https://aluracar.herokuapp.com/salvarPedido?carro=Fiesta+2.0&email=vadsantos.e@gmail.com&endereco=Rua+Mostarda&nome=Eduardo&preco=52800

Alguém tem alguma noção pq isso ta acontecendo?

Descobri! O meu método tava errado! Desculpem o transtorno! salvarpedido** e não salvarPedido!!