javascript AngularJs में सीओआरएस कैसे सक्षम करें



cors angularjs-http (5)

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

इस सीओआरएस हेडर मुद्दे पर आने के लिए हमारे पास कई विकल्प हैं।

  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 विकल्प अनुरोध शीर्षलेख भेजें। क्रॉस-साइट अनुरोध इस तरह से प्रीफ़लाइट किए गए हैं क्योंकि उनके पास उपयोगकर्ता डेटा के प्रभाव हो सकते हैं। विशेष रूप से, एक अनुरोध preflighted है अगर यह जीईटी या पोस्ट के अलावा अन्य तरीकों का उपयोग करता है। साथ ही, यदि POST का उपयोग एप्लिकेशन / x-www-form-urlencoded, multipart / form-data, या text / plain के अलावा किसी सामग्री-प्रकार के साथ अनुरोध डेटा भेजने के लिए किया जाता है, उदाहरण के लिए यदि POST अनुरोध सर्वर पर एक XML पेलोड भेजता है एप्लिकेशन / एक्सएमएल या टेक्स्ट / एक्सएमएल का उपयोग करके, अनुरोध प्रीफलाइट किया गया है। यह अनुरोध में कस्टम हेडर सेट करता है (उदाहरण के लिए अनुरोध हेडर का उपयोग करता है जैसे एक्स-पिंगोदर)

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

    @SpringBoot आवेदन सार्वजनिक वर्ग प्रदायक सेवा अनुप्रयोग {

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

    }

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

    @ कॉन्फ़िगरेशन @EnableWebSecurity पब्लिक क्लास प्रदायक SecurityConfig WebSecurityConfigurerAdapter {

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

    }

मैंने फ़्लिकर फोटो खोज API के लिए जावास्क्रिप्ट का उपयोग करके एक डेमो बनाया है। अब मैं इसे 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 यूआरएल लोड नहीं कर सकता है। उत्पत्ति-नियंत्रण-अनुमति-उत्पत्ति द्वारा उत्पत्ति की अनुमति नहीं है

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

संपादित करें:

मैंने @Quentin के सुझाव पर node.js में प्रॉक्सी सर्वर बनाया है:

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

अंतिम संपादन

मैंने प्राधिकरण शीर्षलेख हटा दिया

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

और यह ठीक चल रहा है। मुझे वह चाहिए जो मैं चाहता था। इस सवाल में भाग लेने के लिए सभी को धन्यवाद


Answer #1

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

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

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

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


Answer #2

मेरे द्वारा उत्तर दिया गया।

कोर पर कोणीय जेएस + आराम आसान

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

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

मैं अभी भी इसे करने का साफ तरीका ढूंढ रहा हूं अगर किसी को इससे पहले सामना करना पड़ा।


Answer #3
        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);

Answer #4

फ़्लिकर जेसनपी का उपभोग करने के लिए संसाधन सेवा का उपयोग करने का प्रयास करें:

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>




angularjs-http