No hay encabezado ‘Access-Control-Allow-Origin’ en el recurso solicitado- AngularJS

XMLHttpRequest cannot load http://mywebservice. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9000' is therefore not allowed access. 

Recibo este error cuando bash ejecutar mi servicio web desde mi código. Traté de encontrarlo e intenté con muchas soluciones que me sugirieron y encontré en la red. Pegando el código a continuación.

 





Y el controlador de la JS correspondiente es:

 app.controller('LoginController', ['$http', '$scope', function ($scope, $http) { $scope.login = function (credentials) { $http.get('http://mywebservice').success(function ( data ) { alert(data); }); } }]); 

El servicio web funciona bien cuando lo presiono desde la barra de URL. ¿Cómo resolver el problema? Amablemente ayuda!

Chrome Webstore tiene una extensión que agrega el encabezado ‘Access-Control-Allow-Origin’ para usted cuando hay una llamada asincrónica en la página que intenta acceder a un host diferente al suyo.

El nombre de la extensión es: ” Permitir-Control-Permitir-Origen: * ” y este es el enlace: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi

En el lado del cliente puede habilitar las solicitudes de cors en AngularJS a través de

 app.config(['$httpProvider', function($httpProvider) { $httpProvider.defaults.useXDomain = true; delete $httpProvider.defaults.headers.common['X-Requested-With']; } ]); 

Sin embargo, si esto sigue generando un error, esto implicaría que el servidor que está realizando la solicitud debe permitir la solicitud de CORS y debe estar configurado para eso.

Este es un problema CORS . Hay algunos ajustes que puede cambiar en angular: estos son los que normalmente configuro en el método Angular .config (no todos están relacionados con CORS):

 $httpProvider.defaults.useXDomain = true; $httpProvider.defaults.withCredentials = true; delete $httpProvider.defaults.headers.common["X-Requested-With"]; $httpProvider.defaults.headers.common["Accept"] = "application/json"; $httpProvider.defaults.headers.common["Content-Type"] = "application/json"; 

También necesita configurar su servicio web; los detalles de esto dependerán del idioma del lado del servidor que esté utilizando. Si usa una herramienta de monitoreo de red, verá que envía una solicitud de OPCIONES inicialmente. Su servidor debe responder adecuadamente para permitir la solicitud de CORS.

La razón por la que funciona en su navegador es porque no es una solicitud de origen cruzado, mientras que su código angular es.

Tengo una solución a continuación y me funciona:

 app.controller('LoginController', ['$http', '$scope', function ($scope, $http) { $scope.login = function (credentials) { $http({ method: 'jsonp', url: 'http://mywebservice', params: { format: 'jsonp', callback: 'JSON_CALLBACK' } }).then(function (response) { alert(response.data); }); } }]); 

en ‘ http: // mywebservice ‘ debe haber necesidad de un parámetro de callback que devuelva JSON_CALLBACK con datos.
Hay un ejemplo de muestra debajo que funciona perfecto

 $scope.url = "https://angularjs.org/greet.php"; $http({ method: 'jsonp', url: $scope.url, params: { format: 'jsonp', name: 'Super Hero', callback: 'JSON_CALLBACK' } }).then(function (response) { alert(response.data); }); 

ejemplo de salida:

 {"name":"Super Hero","salutation":"Apa khabar","greeting":"Apa khabar Super Hero!"} 

Añadí esto y funcionó bien para mí.

web.api

 config.EnableCors(); 

Luego llamarás al modelo usando cors:

En un controlador agregará en la parte superior para el scope global o en cada clase. Tu decides.

  [EnableCorsAttribute("http://localhost:51003/", "*", "*")] 

Además, cuando envía estos datos a Angular, también quiere que se llame al archivo .cshtml, o bien empujará los datos pero no completará su vista.

 (function () { "use strict"; angular.module('common.services', ['ngResource']) .constant('appSettings', { serverPath: "http://localhost:51003/About" }); }()); //Replace URL with the appropriate path from production server. 

Espero que esto ayude a cualquiera, me tomó un tiempo entender Entity Framework, y por qué CORS es tan útil.

En mi caso, estaba intentando conectar un servicio WebAPI en localhost desde dentro de una aplicación MVC que usaba mucho código angular. Mi servicio WebAPI funcionó bien con Fiddler a través de http: // localhost / myservice . Una vez que me tomé un momento para configurar la aplicación MVC para usar IIS en lugar de IIS Express (una parte de Visual Studio), funcionó bien, sin agregar ninguna configuración relacionada con CORS a ninguna área.

Echa un vistazo a estas discusiones

Access-Control-Allow-Origin y Angular.js $ http

http://forum.rejectedsoftware.com/groups/rejectedsoftware.vibed/thread/10500/

tengo

No hay encabezado ‘Access-Control-Allow-Origin’ presente

y el problema fue con la URL que estaba proporcionando. Proporcioné la URL sin una ruta, por ejemplo, https://misty-valley-1234.herokuapp.com/ .

Cuando agregué un camino, funcionó, por ejemplo, https://misty-valley-1234.herokuapp.com/messages . Con las solicitudes GET, funcionó de cualquier manera, pero con las respuestas POST solo funcionó con la ruta agregada.

Usa esta extensión para Chrome. Permite solicitar cualquier sitio con ajax desde cualquier fuente. Agrega a la respuesta el encabezado ‘Allow-Control-Allow-Origin: *’

https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi/related

Reemplazar get con jsonp :

  $http.jsonp('http://mywebservice').success(function ( data ) { alert(data); }); } 

Es un problema en el lado del servidor. Debes agregar la dirección de tu cliente a la API expuesta de tu servidor. Si está utilizando el trabajo de marco Spring, puede anotar @CrossOrgin de org.springframework.web.bind.annotation.CrossOrigin;

Ejemplo: @CrossOrigin (origins = ” http: // localhost: 8080 “)

Si está usando chrome: intente abrir chrome con los argumentos para deshabilitar la seguridad web como lo ve aquí:

Deshabilitar la misma política de origen en Chrome

Así es como funcionó para mí. Para usuarios de Windows que prueban con Soporte y AngularJS

1) Ve a tu escritorio

2) Haga clic derecho en su escritorio y busque “NUEVO” en el cuadro de diálogo emergente desplegable y se expandirá

3) Elija atajo

4) Se abrirá un cuadro de diálogo

5) Haga clic en Buscar y busque Google Chrome.

6) Haga clic en Aceptar-> Siguiente-> Finalizar y se creará el acceso directo de Google en su escritorio

7) Ahora haz clic derecho en el ícono de Google Chrome que acabas de crear

8) Haga clic en propiedades

9) Ingrese esto en la ruta de destino

 "C:\Program Files\Google\Chrome\Application\chrome.exe" --args --disable-web-security 

10) guárdalo

11) Haz doble clic en el acceso directo de Chrome recién creado y pasa el enlace en la barra de direcciones y funcionará.