Cómo habilitar CORS en AngularJs

He creado una demostración usando JavaScript para la API de búsqueda de fotos de Flickr. Ahora lo estoy convirtiendo a AngularJs. He buscado en internet y encontré la siguiente configuración.

Configuración:

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

Servicio:

myApp.service('dataService', function($http) {
    delete $http.defaults.headers.common['X-Requested-With'];
    this.flickrPhotoSearch = function() {
        return $http({
            method: 'GET',
            url: 'http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=3f807259749363aaa29c76012fa93945&tags=india&format=json&callback=?',
            dataType: 'jsonp',
            headers: {'Authorization': 'Token token=xxxxYYYYZzzz'}
         });
     }
});

Controlador:

myApp.controller('flickrController', function($scope, dataService) {
        $scope.data = null;
        dataService.flickrPhotoSearch().then(function(dataResponse) {
            $scope.data = dataResponse;
            console.log($scope.data);
        });
    });

Pero aún así recibí el mismo error. Aquí hay algunos enlaces que probé:

XMLHttpRequest no puede cargar la URL. Origen no permitido por Access-Control-Allow-Origin

http://goo.gl/JuS5B1

Usted no El servidor al que realiza la solicitud debe implementar CORS para otorgar JavaScript desde el acceso a su sitio web. Su JavaScript no puede otorgarse permiso para acceder a otro sitio web.

Tuve un problema similar y para mí se redujo a agregar los siguientes encabezados HTTP en la respuesta del extremo receptor :

Access-Control-Allow-Headers: Content-Type
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Origin: *

Es posible que prefiera no usar *al final, sino solo el nombre de dominio del host que envía los datos. Me gusta*.example.com

Pero esto solo es factible cuando tiene acceso a la configuración del servidor.

Intente usar el servicio de recursos para consumir flickr jsonp:

var MyApp = angular.module('MyApp', ['ng', 'ngResource']);

MyApp.factory('flickrPhotos', function ($resource) {
    return $resource('http://api.flickr.com/services/feeds/photos_public.gne', { format: 'json', jsoncallback: 'JSON_CALLBACK' }, { 'load': { 'method': 'JSONP' } });
});

MyApp.directive('masonry', function ($parse) {
    return {
        restrict: 'AC',
        link: function (scope, elem, attrs) {
            elem.masonry({ itemSelector: '.masonry-item', columnWidth: $parse(attrs.masonry)(scope) });
        }
    };        
});

MyApp.directive('masonryItem', function () {
    return {
        restrict: 'AC',
        link: function (scope, elem, attrs) {
            elem.imagesLoaded(function () {
               elem.parents('.masonry').masonry('reload');
            });
        }
    };        
});

MyApp.controller('MasonryCtrl', function ($scope, flickrPhotos) {
    $scope.photos = flickrPhotos.load({ tags: 'dogs' });
});

Modelo:

<div class="masonry: 240;" ng-controller="MasonryCtrl">
    <div class="masonry-item" ng-repeat="item in photos.items">
        <img ng-src="{{ item.media.m }}" />
    </div>
</div>

Este problema ocurre debido a la política del modelo de seguridad de la aplicación web que es la Política del mismo origen Según la política, un navegador web permite que los scripts contenidos en una primera página web accedan a los datos de una segunda página web, pero solo si ambas páginas tienen el mismo origen. Eso significa que el solicitante debe coincidir con el host, el protocolo y el puerto exactos del sitio solicitante.

Tenemos múltiples opciones para superar este problema de encabezado CORS.

1. Uso de proxy : en esta solución, ejecutaremos un proxy de modo que cuando la solicitud pase por el proxy, parezca que tiene el mismo origen. Si está utilizando el nodeJS , puede usar cors-anywhere para hacer el proxy. https://www.npmjs.com/package/cors-anywhere .

   Ejemplo :

   var host = process.env.HOST || '0.0.0.0';
   var port = process.env.PORT || 8080;
   var cors_proxy = require('cors-anywhere');
   cors_proxy.createServer({
       originWhitelist: [], // Allow all origins
       requireHeader: ['origin', 'x-requested-with'],
       removeHeaders: ['cookie', 'cookie2']
   }).listen(port, host, function() {
       console.log('Running CORS Anywhere on ' + host + ':' + port);
   });

2. JSONP : JSONP es un método para enviar datos JSON sin preocuparse por problemas entre dominios. No utiliza el objeto XMLHttpRequest. En su lugar, utiliza la <script>etiqueta. https://www.w3schools.com/js/js_json_jsonp.asp

3. Lado del servidor: en el lado del servidor, debemos habilitar las solicitudes de origen cruzado. Primero, recibiremos las solicitudes Preflight (OPTIONS) y debemos permitir la solicitud que es el código de estado 200 (ok).

   Las solicitudes verificadas previamente envían primero un encabezado de solicitud de OPCIONES HTTP al recurso en el otro dominio, para determinar si la solicitud real es segura de enviar. Las solicitudes de sitios cruzados se verifican de esta manera, ya que pueden tener implicaciones para los datos del usuario. En particular, una solicitud se verifica previamente si utiliza métodos distintos a GET o POST. Además, si POST se utiliza para enviar datos de solicitud con un tipo de contenido que no sea application / x-www-form-urlencoded, multipart / form-data o text / plain, por ejemplo, si la solicitud POST envía una carga XML al servidor usando application / xml o text / xml, la solicitud se verifica previamente. Establece encabezados personalizados en la solicitud (por ejemplo, la solicitud utiliza un encabezado como X-PINGOTHER)

   Si está utilizando el resorte, solo agregar el siguiente código resolverá el problema. Aquí he deshabilitado el token csrf que no importa habilitar / deshabilitar de acuerdo a sus requerimientos.

   @SpringBootApplication
   public class SupplierServicesApplication {
   
       public static void main(String[] args) {
           SpringApplication.run(SupplierServicesApplication.class, args);
       }
   
       @Bean
       public WebMvcConfigurer corsConfigurer() {
           return new WebMvcConfigurerAdapter() {
               @Override
               public void addCorsMappings(CorsRegistry registry) {
                   registry.addMapping("/**").allowedOrigins("*");
               }
           };
       }
   }

   Si está utilizando la seguridad de primavera, use el código siguiente junto con el código anterior.

   @Configuration
   @EnableWebSecurity
   public class SupplierSecurityConfig extends WebSecurityConfigurerAdapter {
   
       @Override
       protected void configure(HttpSecurity http) throws Exception {
           http.csrf().disable().authorizeRequests().antMatchers(HttpMethod.OPTIONS, "/**").permitAll().antMatchers("/**").authenticated().and()
                   .httpBasic();
       }
   
   }

Encontré un problema similar como este, el problema fue con el backend. Estaba usando el servidor de nodo (Express). Recibí una solicitud de la interfaz (angular) como se muestra a continuación

   onGetUser(){
        return this.http.get("http://localhost:3000/user").pipe(map(
            (response:Response)=>{
                const user =response.json();
                return user;
            }
        )) 
    }

Pero dio el siguiente error

Este es el código de backend escrito usando express sin los encabezados

app.get('/user',async(req,res)=>{
     const user=await getuser();
     res.send(user);
 })

Después de agregar un encabezado al método se resolvió el problema

app.get('/user',async(req,res)=>{
    res.header("Access-Control-Allow-Origin", "*");
    const user=await getuser();
    res.send(user);
})

Puede obtener más detalles sobre cómo habilitar CORS en el nodo JS

Respondido por mí mismo.

CORS angular js + restEasy en POST

Bueno, finalmente llegué a esta solución: la razón por la que funcionó con IE es porque IE envía directamente una POST en lugar de primero una solicitud de verificación previa para pedir permiso. Pero todavía no sé por qué el filtro no pudo administrar una solicitud de OPCIONES y envía encabezados predeterminados que no se describen en el filtro (parece una anulación para ese único caso ... tal vez una cosa fácil de descansar ... .)

Así que creé una ruta OPTIONS en mi servicio de descanso que reescribe la respuesta e incluye los encabezados en la respuesta usando el encabezado de respuesta

Todavía estoy buscando la manera limpia de hacerlo si alguien se enfrentó a esto antes.

Apache / HTTPD tiende a estar presente en la mayoría de las empresas o si está usando Centos / etc en casa. Entonces, si tiene eso, puede hacer un proxy muy fácilmente para agregar los encabezados CORS necesarios.

Tengo una publicación de blog sobre esto aquí, ya que sufrí con ella varias veces recientemente. Pero lo importante es simplemente agregar esto a su archivo /etc/httpd/conf/httpd.conf y asegurarse de que ya está haciendo "Listen 80":

<VirtualHost *:80>
    <LocationMatch "/SomePath">
       ProxyPass http://target-ip:8080/SomePath
       Header add "Access-Control-Allow-Origin" "*"
    </LocationMatch>
</VirtualHost>

Esto garantiza que todas las solicitudes a las URL en la ruta your-server-ip: 80 / SomePath a http: // target-ip: 8080 / SomePath (la API sin compatibilidad con CORS) y que regresen con la correcta Access-Control-Allow- Encabezado de origen para permitirles trabajar con su aplicación web.

Por supuesto, puede cambiar los puertos y apuntar a todo el servidor en lugar de SomePath si lo desea.

Esta respuesta describe dos formas de solucionar las API que no admiten CORS:

• Use un proxy CORS
• Use JSONP si la API lo admite

Una solución alternativa es usar un CORS PROXY:

angular.module("app",[])
.run(function($rootScope,$http) { 
     var proxy = "//cors-anywhere.herokuapp.com";
     var url = "http://api.ipify.org/?format=json";
     $http.get(proxy +'/'+ url)
       .then(function(response) {
         $rootScope.response = response.data;
     }).catch(function(response) {
         $rootScope.response = 'ERROR: ' + response.status;
     })     
})

<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app">
   Response = {{response}}
</body>

Para más información, ver

• GitHub: CORS Anywhere

Use JSONP si la API lo admite:

 var url = "//api.ipify.org/";
 var trust = $sce.trustAsResourceUrl(url);
 $http.jsonp(trust,{params: {format:'jsonp'}})
   .then(function(response) {
     console.log(response);
     $scope.response = response.data;
 }).catch(function(response) {
     console.log(response);
     $scope.response = 'ERROR: ' + response.status;
 }) 

La DEMO en PLNKR

Para más información, ver

• Referencia de la API del servicio AngularJS $ http - $ http.jsonp

        var result=[];
        var app = angular.module('app', []);
        app.controller('myCtrl', function ($scope, $http) {
             var url="";// your request url    
             var request={};// your request parameters
             var headers = {
             // 'Authorization': 'Basic ' + btoa(username + ":" + password),
            'Access-Control-Allow-Origin': true,
            'Content-Type': 'application/json; charset=utf-8',
            "X-Requested-With": "XMLHttpRequest"
              }
             $http.post(url, request, {
                        headers
                 })
                 .then(function Success(response) {
                      result.push(response.data);             
                      $scope.Data = result;              
                 }, 
                  function Error(response) {
                      result.push(response.data);
                       $scope.Data = result;
                    console.log(response.statusText + " " + response.status)
               }); 
     });

And also add following code in your WebApiConfig file            
        var cors = new EnableCorsAttribute("*", "*", "*");
        config.EnableCors(cors);

podemos habilitar CORS en la interfaz utilizando el módulo ngResourse. Pero lo más importante, deberíamos tener este código mientras hacemos la solicitud ajax en el controlador,

$scope.weatherAPI = $resource(YOUR API,
     {callback: "JSON_CALLBACK"}, {get: {method: 'JSONP'}});
 $scope.weatherResult = $scope.weatherAPI.get(YOUR REQUEST DATA, if any);

Además, debe agregar ngResourse CDN en la parte del script y agregarlo como una dependencia en el módulo de la aplicación.

<script src="https://code.angularjs.org/1.2.16/angular-resource.js"></script>

Luego use "ngResourse" en la sección de dependencia del módulo de la aplicación

var routerApp = angular.module("routerApp", ["ui.router", 'ngResource']);