angularjs - headers - header cors angular

Error angular HTTP GET CORS

Question

Aquí está mi punto final, si lo visito

http://d.biossusa.com/api/distributor?key=#####

Lo recuperé

{"152":{"user":{"id":198,"firstname":null,"lastname":null,"username":"Lucerna-chem","email":"[email protected]","type":"Distributor","password_temp":null,"code":"omrotFVDQS3T75wTFUS67W0kUnXUpePrvaP5Pha9QevHjB0olSjPIxhmmJuZ","active":1,"logo_path":"lucerna-chem.jpg","created_at":"2014-10-15","updated_at":"2017-01-30","email_again":"","notification":"","send_invitation":"1","last_logged_in":null,"last_logged_out":null,"logged_in_count":"24","is_online":"0","group":"","cd_count":"10","mmd_count":"11"},"logo":"//9j//4AAQSkZJRgABAQEAYABgAAD//2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz//2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz//wAARCABBARUDASIAAhEBAxEB//8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL//8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKzt .........

Estaba pensando hacer un GET Angular a esa URL. Esto es lo que tengo

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<p>Today''s welcome message is:</p>
<h1>{{myData}}</h1>
</div>
<script>
var app = angular.module(''myApp'', []);
app.config([''$httpProvider'', function($httpProvider) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common[''X-Requested-With''];
}
]);
app.controller(''myCtrl'', function($scope, $http) {
$http.get("http://d.biossusa.com/api/distributor?key=#####")
.then(function(response) {
$scope.myWelcome = response.data;
});
});
</script>

pero seguí recibiendo nada, y seguí recibiendo un error CORS en la consola.

¿Cómo evito ese error CORS? ¿Hay algo que pueda hacer para obtener mi visualización de datos?

Answer 1

necesitas agregar esto:

header(''Access-Control-Allow-Headers: Content-Type'');
header(''Access-Control-Allow-Methods: GET, POST, OPTIONS'');
header(''Access-Control-Allow-Origin: *'');

En laravel, incluido esto en el archivo de ruta.

Answer 2

¿Por qué obtengo un error solo cuando uso angular

Obtendrá ese error cada vez que cree una aplicación web que tenga un JavaScript del lado del cliente que envíe una solicitud de origen cruzado a http://d.biossusa.com/api/distributor?key=***** utilizando XMLHttpRequest o la API de obtención o cualquier biblioteca que los use (por ejemplo, jQuery).

Por lo tanto, no es un problema específico de angular.

En cuanto a por qué obtienes este error, es porque los navegadores restringen tus aplicaciones web para que no realicen solicitudes de origen cruzado desde JavaScript, a menos que el sitio al que se envían las solicitudes acepte permitirlo.

Y la forma en que los sitios optan por permitir solicitudes de origen cruzado es mediante el envío de una respuesta que incluye un encabezado Access-Control-Allow-Origin que indica de qué origen permite las solicitudes.

Por lo tanto, un sitio que envía un encabezado de respuesta Access-Control-Allow-Origin: * le está diciendo a los navegadores que permite que las solicitudes XHR / Fetch de origen cruzado provengan de cualquier origen.

Y los navegadores son las únicas herramientas que verifican el encabezado Access-Control-Allow-Origin . (Y las únicas herramientas que envían el encabezado de solicitud de Origin ).

Considere si usa curl o algo para solicitar un documento de un servidor: el servidor no verifica el encabezado de Origin y se niega a enviar el documento si el origen solicitante no coincide con el encabezado Access-Control-Allow-Origin . El servidor envía la respuesta independientemente.

Y en lo que respecta a los clientes, las herramientas curl y las que no son del navegador no tienen el concepto de origen, por lo que no suelen enviar ningún encabezado de Origin para comenzar. (Puede hacer que curl send one, con cualquier valor que desee, pero no tiene sentido porque a los servidores no les importa cuál es el valor).

Y curl , etc., no verifica el valor del encabezado de respuesta de Access-Control-Allow-Origin envía el servidor, y se niega a obtener un documento si el encabezado de Origin la solicitud no coincide con el Access-Control-Allow-Origin encabezado en la respuesta del servidor. Acaban de obtener el documento.

Pero los navegadores son diferentes. Los motores de búsqueda son en realidad los únicos clientes que tienen la noción de un origen para empezar, y que conocen el origen real en el que se ejecuta el JavaScript de una aplicación web.

Y a diferencia de curl , etc., los navegadores no permitirán que su script obtenga un documento si la llamada XHR o fetch() solicitando que sea de un origen no permitido en el encabezado Access-Control-Allow-Origin del servidor.