कोणीय को एंगुलरज में कैसे सक्षम करें

Question

मैंने फ़्लिकर फोटो खोज एपीआई के लिए जावास्क्रिप्ट का उपयोग करके एक डेमो बनाया है। अब मैं इसे AngularJs में परिवर्तित कर रहा हूं। मैंने इंटरनेट पर खोज की है और कॉन्फ़िगरेशन के नीचे पाया है।

विन्यास:

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

सर्विस:

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

नियंत्रक:

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

लेकिन फिर भी मुझे वही त्रुटि मिली। यहाँ कुछ लिंक मैंने कोशिश की हैं:

XMLHttpRequest URL लोड नहीं किया जा सकता है। एक्सेस-कंट्रोल-अनुमति-उत्पत्ति द्वारा मूल की अनुमति नहीं है

http://goo.gl/JuS5B1

Comments

आपको अपने प्रॉक्सी से डेटा का अनुरोध करना होगा, आप अभी भी इसे फ़्लिकर से सीधे अनुरोध कर रहे हैं।

— क्वेंटिन

@ क्वेंटिन त्वरित उत्तर के लिए धन्यवाद। क्या आप मुझे एक डेमो दे सकते हैं

— अंकिता

तुम बस अपने प्रॉक्सी का URL को flickr.com से URL बदल

— क्वेंटिन

लेकिन मैं फ्लिकर को कैसे कॉल करूंगा? जैसा कि मुझे फ़्लिकर से छवियों की आवश्यकता है।

— अंकित कुमार

क्लाइंट प्रॉक्सी को कॉल करता है। प्रॉक्सी फ़्लिकर कहता है। यही प्रॉक्सी का मतलब है। (आपका प्रॉक्सी कोड ... प्रॉक्सी नहीं है, यह स्थिर फ़ाइलों से JSON और JSONP की सेवा के लिए एक वेब सर्वर है)।

— क्वेंटिन

Answer 1

तुम नहीं। सर्वर जिसे आप अनुरोध कर रहे हैं कि आपको अपनी वेबसाइट के उपयोग से जावास्क्रिप्ट को मंजूरी देने के लिए कोर्स को लागू करना होगा। आपका जावास्क्रिप्ट किसी अन्य वेबसाइट तक पहुँचने के लिए स्वयं को अनुमति नहीं दे सकता है।

Comments

इसके बजाय अपने सर्वर से फ़्लिकर के लिए अनुरोध करें।

— क्वेंटिन

मैं एक सर्वर का उपयोग नहीं कर रहा हूँ लेकिन मैं नोड का उपयोग कर सकता हूँ। क्या आप मुझे इसके साथ रास्ता दिखा सकते हैं?

— अंकिता

टिप्पणी में उपलब्ध स्थान पर नहीं। यह बल्कि विषयों का एक बड़ा सेट है।

— क्वेंटिन

ऐसा क्यों है कि मैं से एक प्रतिक्रिया प्राप्त कर सकते है https://www.google.comडाकिया की तरह एक आवेदन का उपयोग कर, लेकिन जब मैं करने की कोशिश GETसे https://www.google.comएक AJAX कॉल का उपयोग कर रहा CORS त्रुटि मिलती है? क्या कोई रास्ता नहीं है कि मैं AJAX कॉल को POSTMAN से कॉल के समान व्यवहार कर सकता हूं?

— AjaxLeung

@AlexLeung - डाकिया एक स्थापित अनुप्रयोग है। यदि आपकी वेबसाइट Google से मेरा ब्राउज़र अनुरोध डेटा बना सकती है और इसे पढ़ सकती है, तो आपकी वेबसाइट मेरे GMail इनबॉक्स पृष्ठ का अनुरोध कर सकती है और मेरे सभी ईमेल पढ़ सकती है। यह भयानक होगा।

— क्वेंटिन

Answer 2

मेरे पास एक समान समस्या थी और मेरे लिए यह अंतिम समाप्ति की प्रतिक्रिया में निम्नलिखित HTTP हेडर को जोड़ने के लिए उबला हुआ था :

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

आप *अंत में उपयोग नहीं करना पसंद कर सकते हैं , लेकिन डेटा भेजने वाले होस्ट का केवल डोमेन नाम। पसंद*.example.com

लेकिन यह केवल तभी संभव है जब आपके पास सर्वर के कॉन्फ़िगरेशन तक पहुंच हो।

Comments

मैं AngularJs में नया हूं। कृपया आप मुझे बताएं कि इसे कहां लागू करना है?

— अंकित कुमार

@Ankit आपको सर्वर में इन हेडर को जोड़ने की आवश्यकता है , न कि AngularJS में।

— फेलिप

@techcraver - आपको सर्वर के कॉन्फ़िगरेशन के लिए परिचालन की आवश्यकता नहीं है - बस अपनी स्क्रिप्ट के भीतर हेडर पास करें। यदि आपके पास एक PHP बैकएंड है तो यह होगाheader('Access-Control-Allow-Origin: *');

— davidkonrad

@davidkonrad: मैंने कोणीय v4 में संपूर्ण ऐप बनाया है। क्या आप बता सकते हैं कि मुझे इन हेडर को कहां शामिल करना है: /

— Pygirl

@ गर्ल, मेरा मानना ​​है कि आपने कोणीय में क्लाइंटसाइड बनाया है? आपको प्रतिक्रिया सर्वर पर हेडर जोड़ने की आवश्यकता है कि कैसे और कहाँ तकनीक पर निर्भर है। यदि यह एक PHP स्क्रिप्ट है जिसे आप एक कोणीय Http.get()या समान से कॉल करते हैं , तो header('Access-Control-Allow-Origin: *')पहले PHP स्क्रिप्ट में बहुत पहले आउटपुट के रूप में जोड़ें (यानी वास्तविक प्रतिक्रिया के उत्पादन से पहले, JSON, जो कभी भी।

— davidkonrad

Answer 3

फ़्लिकर 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' });
});

टेम्पलेट:

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

यह समस्या वेब अनुप्रयोग सुरक्षा मॉडल नीति के कारण होती है जो समान उत्पत्ति नीति है नीति के तहत, एक वेब ब्राउज़र एक दूसरे वेब पेज में डेटा तक पहुंचने के लिए पहले वेब पेज में निहित स्क्रिप्ट की अनुमति देता है, लेकिन केवल तभी जब दोनों वेब पेजों में एक ही मूल हो। इसका मतलब है कि अनुरोधकर्ता को अनुरोध साइट के सटीक होस्ट, प्रोटोकॉल और पोर्ट से मेल खाना चाहिए।

हमारे पास इस CORS शीर्षलेख समस्या पर आने के लिए कई विकल्प हैं।

1. प्रॉक्सी का उपयोग करना - इस समाधान में हम एक प्रॉक्सी चलाएंगे, जब अनुरोध प्रॉक्सी से होकर गुजरेगा तो ऐसा प्रतीत होगा कि यह कुछ उसी तरह का है। यदि आप नोडज का उपयोग कर रहे हैं तो आप प्रॉक्सी सामान का उपयोग करने के लिए कहीं भी कॉर्स का उपयोग कर सकते हैं । https://www.npmjs.com/package/cors-anywhere ।

   उदाहरण : -

   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 क्रॉस-डोमेन मुद्दों के बारे में चिंता किए बिना JSON डेटा भेजने के लिए एक विधि है। यह XMLHttpRequest ऑब्जेक्ट का उपयोग नहीं करता है <script>। इसके बजाय टैग का उपयोग करता है । https://www.w3schools.com/js/js_json_jsonp.asp

3. सर्वर साइड - सर्वर साइड पर हमें क्रॉस-ऑरिजनल रिक्वेस्ट को इनेबल करना होगा। पहले हमें पूर्वनिर्धारित अनुरोध (विकल्प) मिलेंगे और हमें अनुरोध की अनुमति देने की आवश्यकता है जो स्थिति कोड 200 (ठीक) है।

   पहले से अनुरोधित अनुरोध यह बताने के लिए कि वास्तविक अनुरोध भेजने के लिए सुरक्षित है या नहीं, दूसरे डोमेन पर संसाधन के लिए एक HTTP विकल्प अनुरोध शीर्ष लेख भेजें। क्रॉस-साइट अनुरोध इस तरह से पूर्वनिर्धारित हैं क्योंकि उनके उपयोगकर्ता डेटा के लिए निहितार्थ हो सकते हैं। विशेष रूप से, अगर यह GET या POST के अलावा अन्य तरीकों का उपयोग करता है, तो एक अनुरोध पूर्वनिर्धारित है। इसके अलावा, यदि POST का उपयोग अनुप्रयोग / x-www-form-urlencoded, मल्टीपार्ट / फॉर्म-डेटा, या पाठ / सादे के अलावा अन्य सामग्री-प्रकार के साथ अनुरोध डेटा भेजने के लिए किया जाता है, जैसे कि यदि POST अनुरोध सर्वर पर XML पेलोड भेजता है आवेदन / xml या पाठ / xml का उपयोग कर, तो अनुरोध पूर्वनिर्मित है। यह अनुरोध में कस्टम हेडर सेट करता है (जैसे अनुरोध एक्स-पिंगोथर जैसे हेडर का उपयोग करता है)

   आप उपयोग कर रहे हैं वसंत सिर्फ bellow कोड जोड़ने समस्या का समाधान होगा। यहाँ मैंने csrf टोकन को निष्क्रिय कर दिया है जो आपकी आवश्यकता के अनुसार सक्षम / अक्षम नहीं करता है।

   @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("*");
               }
           };
       }
   }

   यदि आप उपरोक्त कोड के साथ नीचे दिए गए स्प्रिंग सुरक्षा उपयोग का उपयोग कर रहे हैं।

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

मुझे इस तरह की समस्या का सामना करना पड़ा, समस्या बैकएंड के साथ थी। मैं नोड सर्वर (एक्सप्रेस) का उपयोग कर रहा था। जैसा कि नीचे दिखाया गया है, मुझे फ़्रंटएंड (कोणीय) से एक अनुरोध प्राप्त हुआ था

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

लेकिन इसने निम्नलिखित त्रुटि दी

यह हेडर के बिना एक्सप्रेस का उपयोग करते हुए लिखा गया बैकएंड कोड है

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

हेडर जोड़ने के बाद विधि समस्या हल हो गई थी

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

आप नोड जेएस पर कॉर्स को सक्षम करने के बारे में अधिक जानकारी प्राप्त कर सकते हैं

Answer 6

खुद से जवाब दिया।

CORS कोणीय js + restEasy POST पर

खैर आखिरकार मैं इस समस्या पर आया: IE के साथ काम करने का कारण यह है क्योंकि IE अनुमति के लिए पूछने के लिए पहले से अनुरोध के बजाय सीधे एक पोस्ट भेजता है। लेकिन मैं अभी भी नहीं जानता कि फ़िल्टर विकल्प अनुरोधों को प्रबंधित करने में सक्षम क्यों नहीं था और डिफ़ॉल्ट हेडर द्वारा भेजता है जो फ़िल्टर में वर्णित नहीं हैं (केवल उस मामले के लिए एक ओवरराइड की तरह लगता है ... शायद एक आराम की बात .. ।)

इसलिए मैंने अपनी बाकी सेवा में एक ऑप्‍शन रास्‍ता बनाया जो रिपीट को फिर से लिखता है और प्रतिक्रिया हेडर का उपयोग करके प्रतिक्रिया में हेडर शामिल करता है

मैं अभी भी यह करने के लिए स्वच्छ तरीके की तलाश कर रहा हूं यदि किसी ने पहले भी इसका सामना किया हो।

Answer 7

Apache / HTTPD का झुकाव ज्यादातर उद्यमों में या अगर आप घर पर Centos / etc का उपयोग कर रहे हैं, तो हो सकता है। इसलिए, यदि आपके पास वह है, तो आप आवश्यक कोर हेडर जोड़ने के लिए बहुत आसानी से एक प्रॉक्सी कर सकते हैं।

मेरे पास इस पर एक ब्लॉग पोस्ट है जैसा कि मैंने हाल ही में काफी बार इसके साथ सामना किया। लेकिन महत्वपूर्ण बिट यह सिर्फ आपके /etc/httpd/conf/httpd.conf फ़ाइल में जोड़ रहा है और सुनिश्चित करता है कि आप "पहले से सुनें 80" कर रहे हैं:

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

यह सुनिश्चित करता है कि आपके सर्वर-आईपी: 80 / SomePath मार्ग से http: // target-ip: 8080 / SomePath (API के बिना API समर्थन) के तहत URL के लिए सभी अनुरोध और वे सही पहुँच-नियंत्रण-अनुमति के साथ वापस आते हैं- उन्हें अपने वेब ऐप के साथ काम करने की अनुमति देने के लिए हेडर की उत्पत्ति करें।

बेशक आप पोर्ट्स को बदल सकते हैं और अगर आपको पसंद है तो SomePath के बजाय पूरे सर्वर को लक्षित कर सकते हैं।

Answer 8

यह उत्तर उन APIs को हल करने के दो तरीके बताता है जो CORS का समर्थन नहीं करते हैं:

• एक कोर प्रॉक्सी का उपयोग करें
• अगर एपीआई इसका समर्थन करता है तो JSONP का उपयोग करें

---

एक समाधान एक कोर का उपयोग करने के लिए है:

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>

अधिक जानकारी के लिए देखें

• गिटहब: कहीं भी

---

अगर एपीआई इसका समर्थन करता है तो JSONP का उपयोग करें:

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

PLNKR पर डेमो

अधिक जानकारी के लिए देखें

• AngularJS $ http सेवा एपीआई संदर्भ - $ http.jsonp

Answer 9

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

Comments

"और अपनी WebApiConfig फ़ाइल में निम्न कोड भी जोड़ें" - सवाल फ़्लिकर के लिए अनुरोध करने के बारे में है। उनके सर्वर ओपी के नियंत्रण में नहीं हैं। फ़्लिकर शायद ASP.NET का उपयोग नहीं कर रहा है।

— क्वेंटिन

Answer 10

हम ngResourse मॉड्यूल का उपयोग करके फ्रंट में कॉर्स को सक्षम कर सकते हैं। लेकिन सबसे महत्वपूर्ण बात, हमें नियंत्रक में अजाक्स अनुरोध करते समय कोड का यह टुकड़ा होना चाहिए,

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

इसके अलावा, आपको स्क्रिप्ट भाग में ngResourse CDN जोड़ना होगा और ऐप मॉड्यूल में निर्भरता के रूप में जोड़ना होगा।

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

फिर एप्लिकेशन मॉड्यूल निर्भरता अनुभाग में "ngResourse" का उपयोग करें

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