javascript - how - enable cors angular 5

Cómo habilitar CORS en AngularJs

Question

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 he encontrado la configuración a continuació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 tengo el mismo error. Aquí hay algunos enlaces que probé:

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

http://samurails.com/tutorial/cors-with-angular-js-and-sinatra/

EDITAR:

Creé un servidor proxy en node.js en la sugerencia de @Quentin:

var http = require(''http'');
var url = require(''url'');
var fs = require(''fs'');
var server;

server = http.createServer(function (req, res) {
    // your normal server code
    var path = url.parse(req.url).pathname;
    fs.readFile(__dirname + path, function (err, data) {
        if (err) {
            return send404(res);
        }
        res.writeHead(200, {''Content-Type'':path == ''json.js'' ? ''text/javascript'' : ''text/html''});
        res.write(data, ''utf8'');
        res.end();
    });
}),
server.listen(8001);
//using express to load customizes static files
var express = require("express"),
    app = express();

app.all("/api/*", function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Cache-Control, Pragma, Origin, Authorization, Content-Type, X-Requested-With");
    res.header("Access-Control-Allow-Methods", "GET, PUT, POST");
    return next();
});
app.use("/js", express.static(__dirname + ''/js''));
app.listen(3001);

Final Edit

Eliminé el encabezado de Autorización

headers: {''Authorization'': ''Token token=xxxxYYYYZzzz''}

y está funcionando bien Tengo lo que quería. Gracias a todos por su participación en esta pregunta

Answer 1

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

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

1. Usando Proxy - En esta solución ejecutaremos un proxy de manera que cuando la solicitud pasa por el proxy aparecerá como si fuera de algún origen. Si está utilizando el nodeJS , puede usar cors-anywhere para hacer las cosas del 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, usa la etiqueta <script> . 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 obtendremos las solicitudes Preflighted (OPTIONS) y debemos permitir que la solicitud sea el código de estado 200 (ok).

   Las solicitudes predefinidas primero envían un encabezado de solicitud HTTP OPTIONS al recurso en el otro dominio, para determinar si la solicitud real es segura de enviar. Las solicitudes entre sitios se preludian de esta manera, ya que pueden tener implicaciones para los datos del usuario. En particular, una solicitud se realiza de antemano si utiliza métodos distintos de GET o POST. Además, si se utiliza POST para enviar datos de solicitud con un tipo de contenido distinto de 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, entonces la solicitud se realiza de antemano. Establece encabezados personalizados en la solicitud (por ejemplo, la solicitud utiliza un encabezado como X-PINGOTHER)

   Si está utilizando la primavera, solo agregue el código siguiente resolverá el problema. Aquí he desactivado el token csrf que no tiene importancia para habilitar / deshabilitar de acuerdo con sus requisitos.

   @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 el código de seguridad de primavera, utilice 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();
   }

   }

Answer 2

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>

Answer 3

Respondido por mí mismo

CORS angular js + descansoFácil en POST

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

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

Todavía estoy buscando la forma limpia de hacerlo si alguien se enfrenta a esto antes.

Answer 4

Tu no El servidor al que hace 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.

Answer 5

Tuve un problema similar y para mí se redujo a agregar los siguientes encabezados HTTP en la respuesta del 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 tienes acceso a la configuración del servidor.

Answer 6

        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);