Read json via http by Angularjs

Question

I am trying to read with an Angularjs/Phonegap application an HTTPS address that gives me a JSON (https://gestormegaclube.com.br/api/app/v1/parceiros). I’m getting this mistake:

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"}

I don’t think this is server blocking because using Postman (https://www.getpostman.com/) it returns me the information, I’ve used several different header and nothing works.

.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;
  });
});

Maybe it’s because I’m on localhost, someone knows how to get around it?

Answer 1

The Access-Control-Allow-Origin has to be set on the server you are requesting.

This is a server security policy that defines which hosts/ips can access your services.

It is not the one who consumes the API, in the case of your Angularjs app, that uses this setting.

---

UPDATE

Question: Why Postman can access json?

Answer: Because who is responsible for security is the browser. The API server sends its security data to the Browser telling you who can order its services, which verbs are allowed, which headers and etc. Postman requests it as a backend application and not emulating an app in a browser.

Answer 2

• In Stack Overflow gringo you can find your solution here:
• I made the request on my localhost and received the same error, this apparently is CORS.
• But in Postman It Works(The Postman and Son of the Devil)

GET request

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;
        }

    }

My GET was as follows for the server(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

Answer 3

A brief explanation of why this happens.

I use this plugin for DEV when I can’t edit the API server settings.

Moesif Origin & CORS Changer

recalling that in production in the case of hosts different, you should set up on your API server for it to "give" access to the other server (front) consume the API.

I didn’t put code because it might vary a little technology.