He creado una demo usando JavaScript para Flickr photo search API.
Ahora me estoy convirtiendo a la AngularJs.
He buscado en internet y encontré a continuación configuración.

De 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 todavía tengo el mismo error.
Aquí hay algunos enlaces que he intentado:

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

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

EDICIÓN:

He creado un servidor proxy en node.js a 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);

Última Edición

Me quita el encabezado de Autorización

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

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

Usted tiene que solicitar los datos de su proxy, usted todavía está solicitando directamente desde flickr.
Gracias por la rápida respuesta. Puede usted por favor me dan una demo.
Acaban de cambiar la URL de flickr.com a la URL del proxy
Pero, ¿cómo me va a llamar a flickr? como necesito las imágenes de flickr.
El cliente llama al proxy. El proxy llama flickr. Que es lo proxy means. (Su código de proxy … no es un proxy es un servidor web para servir a JSON y JSONP de archivos estáticos).

OriginalEl autor ankitr | 2014-05-23

6 Comentarios

  1. 170

    No. El servidor que está haciendo la petición a la aplicación CORS para conceder JavaScript de su acceso al sitio web. JavaScript no se puede conceder a sí mismo permiso para acceder a otra página web.

    Las solicitudes de Flickr de su servidor en su lugar.
    No estoy utilizando un servidor pero puedo usar node.js. ¿Me puede mostrar el camino con esto?
    No en el espacio disponible en un comentario. Se trata más bien de un gran conjunto de temas.
    Una gran guía para habilitar CORS se puede encontrar aquí : enable-cors.org
    Cartero es una aplicación instalada. Si su sitio web podría hacer mi solicitud de explorador de datos de Google y la leyó, su sitio web podría solicitar mi Bandeja de entrada de GMail página y lee todos los de mi correo electrónico. Eso sería terrible.

    OriginalEl autor Quentin

  2. 59

    He tenido un problema similar y para mí esto se redujo a la adición de los siguientes encabezados HTTP en el respuesta de la recepción final de:

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

    Que prefieren no utilizar el * en el fin, sino sólo el nombre de dominio del host de envío de los datos. Como *.example.com

    Pero esto sólo es posible cuando se tiene acceso a la configuración del servidor.

    Soy nuevo en AngularJs. Por favor me puede decir donde para implementar esto?
    Usted necesita agregar estos encabezados en la servidor, no en AngularJS.
    Votado para la última declaración: «Pero esto sólo es posible cuando se tiene acceso a la configuración del servidor»
    Usted no necesita operacionales acceso a la configuración del servidor – sólo tiene que pasar de las cabeceras de dentro de la secuencia de comandos. Si usted tiene un PHP backend sería header('Access-Control-Allow-Origin: *');
    Esta es la solución más limpia para habilitar CORS en el lado del servidor. 5 más upvotes.

    OriginalEl autor Erwin

  3. 9

    Trate de 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' });
    });

    Plantilla:

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

    OriginalEl autor XGreen

  4. 2

    Este problema se produce debido a la seguridad de aplicaciones web modelo de política que se Mismo Origen de la Política de en Virtud de la política, un navegador web que permite a los scripts contenidos en una primera página web para acceder a los datos en una segunda página web, pero sólo si ambas páginas web tienen el mismo origen. Eso significa que el solicitante debe coincidir exactamente con las de acogida, el protocolo y el puerto del sitio solicitante.

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

    1. El uso de Proxy – En esta solución vamos a correr un proxy tal que cuando la solicitud pasa por el proxy va a aparecer como que es el mismo origen.
      Si usted está utilizando el nodeJS puede utilizar cors-en cualquier lugar para hacer el proxy cosas. 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 el envío de datos JSON sin tener que preocuparse acerca de la cruz-dominio de los temas.No utilice el objeto XMLHttpRequest.Utiliza el <script> etiqueta en su lugar. https://www.w3schools.com/js/js_json_jsonp.asp

    3. Lado del servidor – En el lado del servidor tenemos que habilitar la cruz-las solicitudes de origen.
      En primer lugar vamos a obtener la Preflighted solicitudes (OPCIONES) y tenemos que permitir que la solicitud de código de estado 200 (aceptar).

      Preflighted solicitudes envíe primero un HTTP OPCIONES de encabezado de solicitud para el recurso en el otro dominio, con el fin de determinar si la solicitud real es seguro para enviar. Cross-site solicitudes preflighted como este, ya que puede tener implicaciones para los datos de usuario. En particular, la solicitud se preflighted si utiliza otros métodos de GET o POST. También, si el POST es usado para enviar los datos de la solicitud con un Tipo de Contenido distinto application/x-www-form-urlencoded, multipart/form-data, o text/plain, por ejemplo, si la solicitud POST envía una carga XML al servidor mediante el uso de application/xml o de texto/xml, la solicitud se preflighted.
      Establece los encabezados personalizados en la solicitud (por ejemplo, la solicitud utiliza un encabezado como el X-PINGOTHER)

      Si usted está utilizando el primavera sólo añadir el bramido de código se resuelve el problema.
      Aquí he desactivado el token csrf que no importa activar/desactivar según su requisito.

      @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 usted está utilizando el resorte de seguridad utilizar a continuación el código 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();
          }
      
      }

    OriginalEl autor Niru

  5. 1

    Respondió por mí mismo.

    CORS angular js + restEasy en el POST

    Bueno, finalmente he llegado a esta solución:
    La razón por la que trabajó con el IE es porque IE envía directamente un POST en lugar de en primer lugar una comprobación previa solicitud para pedir permiso.
    Pero yo todavía no sé por qué el filtro no era capaz de gestionar una solicitud de OPCIONES y envía por defecto cabeceras que no se describe en el filtro (parece como un reemplazo para ese único caso … tal vez un restEasy cosa …)

    Por lo que creó una de las OPCIONES de ruta en mi servicio rest que vuelve a escribir la respuesta, e incluye las cabeceras de la respuesta mediante encabezado de respuesta

    Todavía estoy buscando la manera limpia hacerlo si alguien se enfrentaron a este antes.

    OriginalEl autor J.Doe

  6. 0
            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);
    «Y también agregar el siguiente código en su WebApiConfig archivo» — La pregunta es acerca de hacer una solicitud a Flickr. Sus servidores no están bajo el control de la OP. Flickr probablemente no use ASP.NET cualquiera de los dos.

    OriginalEl autor shiva samalla

Dejar respuesta

Please enter your comment!
Please enter your name here