1

Estou tentando ler com uma aplicação AngularJS/Phonegap um endereço HTTPS que me retorna um JSON (https://gestormegaclube.com.br/api/app/v1/parceiros). Estou recebendo este erro:

XMLHttpRequest cannot load https://gestormegaclube.com.br/api/app/v1/parceiros. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8000' is therefore not allowed access. The response had HTTP status code 404.

angular.js:14700 Possibly unhandled rejection: {"data":null,"status":-1,"config":{"method":"GET","transformRequest":[null],"transformResponse":[null],"jsonpCallbackParam":"callback","headers":{"Access-Control-Allow-Origin":"*","Access-Control-Allow-Methods":"GET, POST, PUT, DELETE, OPTIONS","Access-Control-Allow-Headers":"Content-Type, X-Requested-With","Access-Control-Allow-Credentials":true,"Accept":"application/json, text/plain, */*"},"url":"https://gestormegaclube.com.br/api/app/v1/parceiros"},"statusText":"","xhrStatus":"error"}

Acho que isso não é bloqueio no servidor porque, usando o PostMan (https://www.getpostman.com/) ele me retorna as informações, já usei vários header diferentes e nada funciona.

.controller('MainController', function($scope, $http){
  $http.get("https://gestormegaclube.com.br/api/app/v1/parceiros", {
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
      'Access-Control-Allow-Headers': 'Content-Type, X-Requested-With',
      'Access-Control-Allow-Credentials':  true
    }
  }).then(function(response) {
    $scope.data = response.data;
  });
});

Talvez seja por eu estar em localhost, alguém sabe contornar isso?

1
  • Esse link não funcionou
    – GeekSilva
    Commented 29/08/2017 às 12:58

3 Respostas 3

1

O Access-Control-Allow-Origin tem que estar definido no servidor que você esta requisitando.

Isso é uma política de segurança do servidor onde que define quais hosts/ips podem acessar seus serviços.

Não é quem consome a API, no caso seu app angularjs, que setta essa configuração.


UPDATE

Pergunta: Porque o postman consegue acessar o json?

Resposta: Por que quem é responsável pela segurança é o browser. O servidor da API envia os dados de segurança dele pro Browser dizendo quem pode requisitar os serviços dele, quais verbos são permitidos, quais headers e etc. O Postman faz a requisição como uma aplicação backend e não emulando um app num browser.

2
  • Então me explique o porque o postman consegue acessar o json sem problemas? ele tbm não está configurado no servidor. Commented 29/08/2017 às 13:35
  • Por que quem é responsável pela segurança é o browser. O servidor da API envia os dados de segurança dele pro Browser dizendo quem pode requisitar os serviços dele, quais verbos são permitidos, quais headers e etc. O Postman faz a requisição como uma aplicação backend e não emulando um app num browser.
    – Giovane
    Commented 29/08/2017 às 13:46
1
  • No Stack Overflow gringo você pode achar sua solução aqui:
  • Eu fiz a requisição no meu localhost e recebi o mesmo erro, isso aparentemente é CORS.
  • Mas no Postman Funciona(O postman e filho do demônio)

Requisição GET

function teste() {


        var config = {
            headers: {
                'Access-Control-Allow-Origin': 'http://192.168.88.101:3000',
                'Content-Type': 'application/json'
            }

        };


        return $http.get('https://gestormegaclube.com.br/api/app/v1/parceiros', config)
            .then(getAllComplete)
            .catch(getAllFailed);

        function getAllComplete(response) {

            console.log(response);

            return response.data;
        }

        function getAllFailed(error) {
            error.erro = true;
            return error;
        }

    }

Meu GET foi da seguinte forma para o servidor(HEADERS):

OPTIONS /api/app/v1/parceiros HTTP/1.1
Host: gestormegaclube.com.br
Connection: keep-alive
Access-Control-Request-Method: GET
Origin: http://192.168.88.101:3000
User-Agent: Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) 
AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.101 Mobile 
Safari/537.36
Access-Control-Request-Headers: access-control-allow-origin
Accept: */*
Referer: http://192.168.88.101:3000/
Accept-Encoding: gzip, deflate, br
Accept-Language: pt-BR,pt;q=0.8,en-US;q=0.6,en;q=0.4
2
  • Vi que vc colocou seu IP e a porta que deve estar liberada no roteador. Entendi e entendi o que o Giovane falou tbm. Se eu criar a API que entrega o JSON localmente irá funcionar, porem quando compilar o APP e rodar no smartphone não funcionaria, pq seria um cross domain do mesmo jeito. Então nunca vai funcionar a não ser que o servidor esteja configurado com as pernas abertas para qualquer tipo de conexão. Commented 29/08/2017 às 14:15
  • @CarlosFagianiJr na verdade coloquei meu ip Local(Tinha que ter colocado o real mesmo para tentar forçar) pois é como é via celular vai ter que aceitar all mesmo Accept: / Te aconselho a usar Token JWT na sua camada de segurança. Commented 29/08/2017 às 14:20
0

Uma explicação breve sobre o porque isto acontece.

Eu utilizo este plugin para DEV quando não posso editar as configurações do servidor da API.

Moesif Origin & CORS Changer

lembrando que em produção no caso de hosts diferentes, você deve configurar no servidor da sua API para que ela "dê" acesso ao outro servidor (front) consumir a API.

Não coloquei código pois ele pode variar um pouco de tecnologia.

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 .