CORS 'Access-Control-Allow-Origin' in Angularjs

1

I'm trying to get data from this url: link

but when I show the results I get this error:

Request from another blocked source: the same source policy prevents reading the remote resource at link (reason: the CORS header 'Access-Control-Allow-Origin' is missing).

Below I share my code:

services.js

.service('ServEj', ['$http',function($http) {
    this.servicioEj = function() {
      return $http.get('http://carbono.utpl.edu.ec:8080/smartlandiotv2/webresources/entidades.datos/get?apikey=3bff8615827f32442199fdb2ed4df4');
    };
}])

controller.js

.controller('ctrl1',['$scope','ServEj','Autenticacion', function($scope, ServEj, Autenticacion){
    $scope.loader = true;
    ServEj.servicioEj().success(function(data){
        $scope.datos=data;
    })
    .error(function(data){
        $scope.Mensaje = 'Error de conexión..!';
    })
    .finally(function() {
    $scope.loader = false; 
    }); 

    $scope.salir = function(){
        Autenticacion.logout();
    }
}])

vista.html

<div class="row">
    <div class="col s12 m12 l9"></div>
    <div class="col s12 m12 l3">
        <nav>
            <div class="nav-wrapper indigo darken-1">
                <form>
                    <div class="input-field">
                      <input id="search" type="search" required ng-model="busqueda">
                      <label for="search"><i class="material-icons">search</i></label>
                      <i class="material-icons">close</i>
                    </div>
                </form>
            </div>
        </nav>
        <div class="progress indigo lighten-3" ng-show="loader">
            <div class="indeterminate indigo darken-1"></div>
        </div>        
        <div class="collection" ng-show="Mensaje">
            <a class="collection-item indigo-text text-darken-3">
                {{Mensaje}}
            </a>
        </div>
        <div class="collection">
            <a href="#!" class="collection-item indigo-text text-darken-3" ng-repeat="i in datos | filter:busqueda">
                {{i.Nombre}}
            </a>
        </div>
    </div>            
</div>

I would like to know how to solve this problem.

Thank you in advance.

    
asked by Dimoreno 22.11.2016 в 06:19
source

1 answer

3

Welcome to the exciting world of CORS .

In summary: you are trying to access a resource hosted on a server A from a resource hosted by a server B, and for security it is required that server A authorize B explicitly.

Server A performs this authorization including this header when replying: Access-Control-Allow-Origin: (url del servidor B) .

So to solve this, you have to make a change to the server you access to include that header in your answers.

You can find more information at this article from the MDN

    
answered by 22.11.2016 в 11:21