0

Intentando conectarme a un API desde angular y me sale el siguiente error:

   XMLHttpRequest cannot load https://web/api/beta/ruc. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

el codigo es el siguiente ...

  var app = angular.module("app", []);
app.controller("HttpController", function ($scope, $http, $httpParamSerializer) {

    $scope.GetData = function () {
        var data = $httpParamSerializer({
            token : "c664bfba-9969-4e57-ab7a-4532bc81670b-ef3868a6-e62f-45c8-9a36-92db7c21a353",
            ruc : "10178520739"
        });
        var config = {
            headers : {
                'Content-Type': 'application/x-www-form-urlencoded;'
            }
        }

        $http.post('https://web/api/beta/ruc', data, config)
        .then(function (data) {
            $scope.response = "Exito" + data;
        })
        .then(function (data) {
            $scope.response = "Error: " + data;
        });
    };

});

si quieren el ejemplo mas detallado y la web a la cual realizo el API pueden acceder a https://jsfiddle.net/darthSinuhe/ckby0x88/

1

3 respuestas 3

4

Imagínate que tu aplicación Angular, con dirección https://web/..., en lugar de pedir datos al servicio con dirección http://localhost:3000, pidiera datos a un servicio con dirección https://mail.google.com... ahora piénsalo con cuidado... ¿Debería el navegador permitir que la aplicación angular acceda a esos datos?... ¿No sería muy fácil leer el correo de cualquier persona sin siquiera conocer sus credenciales?

Esto es CORS, una característica de los navegadores, que sirve para evitar que una pagina no autorizada acceda a los datos de un servicio X.

Osea que es el servicio quien autoriza o no a otras paginas a consumir dicho servicio.

CORS funciona gracias a la familia de headers HTTP que comienzan con Access-Control. Hay varios grados de libertad para configurar el origen, el/los métodos HTTP (GET, POST, etc), el Content-Type, Headers, etc.

La solución es habilitar CORS en el endpoint (http://localhost:3000), en las respuestas deberías ver algo así..

Access-Control-Allow-Origin: *

Para habilitar CORS, como depende del server que uses, te dejo este enlace que da un resumen de como hacerlo en los servers mas comunes: http://enable-cors.org/server.html

Ojo!! esto significa que cualquier pagina web tendrá la posibilidad de consumir este servicio. Así que dependiendo de la sensibilidad de la información quizá debas poner una regla mas especifica.

1
var config = {
    headers : {
        'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8;'
    }
};
$http.get("controller/getPositionAutority.php,config)
   .success(function (response){
         console.log(response);
})

Es necesario enviar los headers al Api para que te responda o como en este ejemplo declarar los headers de respuesta por defecto como objeto JSON.

0

Es un problema de Cors. Tienes que configurar la API para que acepte estas peticiones. Para ello prueba a acceder al fichero Startup.cs de tu API.

1- En el método ConfigureServices() añade la lĺinea: services.AddCors();

ConfigureServices

2- En el método Configure() añade: app.UseCors( builder => builder .AllowAnyOrigin() .AllowAnyMethod() .AllowAnyHeader() .AllowCredentials() ); Configure

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.