AngularJs এ CORS কীভাবে সক্ষম করবেন

Question

আমি ফ্লিকার ফটো অনুসন্ধান API এর জন্য জাভাস্ক্রিপ্ট ব্যবহার করে একটি ডেমো তৈরি করেছি। এখন আমি এগুলারজেজে রূপান্তর করছি। আমি ইন্টারনেটে অনুসন্ধান করেছি এবং নীচের কনফিগারেশনটি পেয়েছি।

কনফিগারেশন:

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

আপনাকে আপনার প্রক্সি থেকে ডেটা অনুরোধ করতে হবে, আপনি এখনও এটি সরাসরি ফ্লিকার থেকে অনুরোধ করছেন।

— কুইন্টিন

@ উত্তরীন দ্রুত উত্তর দেওয়ার জন্য ধন্যবাদ। আপনি কি আমাকে একটি ডেমো দিতে পারেন?

— অঙ্কিত

আপনি কেবল ফ্লিকার.কম থেকে আপনার প্রক্সিটির ইউআরএল ইউআরএল পরিবর্তন করেছেন

— কোয়ান্টিন

তবে আমি কীভাবে ফ্লিকার বলব? আমি ফ্লিকার থেকে ছবি প্রয়োজন হিসাবে।

— অঙ্কিত

ক্লায়েন্ট প্রক্সি কল করে। প্রক্সি কল করে ফ্লিকারকে। প্রক্সি এর অর্থ এটিই। (আপনার প্রক্সি কোড ... একটি প্রক্সি নয়, এটি স্ট্যাটিক ফাইলগুলি থেকে জেএসএন এবং জেএসএনপি পরিবেশন করার জন্য একটি ওয়েব সার্ভার)।

— কুইন্টিন

Answer 1

আপনি না। আপনি যে সার্ভারটির জন্য অনুরোধ করছেন সেটি আপনার ওয়েবসাইট অ্যাক্সেস থেকে জাভাস্ক্রিপ্ট মঞ্জুর করতে CORS প্রয়োগ করতে হবে। আপনার জাভাস্ক্রিপ্ট অন্য কোনও ওয়েবসাইট অ্যাক্সেস করার অনুমতি দিতে পারে না।

Comments

পরিবর্তে আপনার সার্ভার থেকে ফ্লিকারের অনুরোধগুলি করুন।

— কুইন্টিন

আমি কোনও সার্ভার ব্যবহার করছি না তবে আমি নোড.জেএস ব্যবহার করতে পারি আপনি কি আমাকে এই দিয়ে পথ দেখাতে পারেন?

— অংকিত

কোনও মন্তব্যে উপলভ্য স্থান নেই। এটি বরং বিষয়ের একটি বড় সেট set

— কুইন্টিন

কেন এটা যে আমি থেকে একটি প্রতিক্রিয়ার পেতে পারেন https://www.google.comপিয়ন মত একটি অ্যাপ্লিকেশন ব্যবহার করে, কিন্তু যখন আমি চেষ্টা GETথেকে https://www.google.comএকটি AJAX কল ব্যবহার আমি CORS ভুল পান? পোষ্টমানের কলটির সাথে আমি আজ্যাক কলকে একইভাবে আচরণ করার কোনও উপায় নেই?

— আজাদলিং

@ অ্যালেক্সলিউং - পোস্টম্যান একটি ইনস্টলড অ্যাপ্লিকেশন। যদি আপনার ওয়েবসাইটটি আমার ব্রাউজারটি গুগল থেকে ডেটা তৈরি করতে এবং এটি পড়তে পারে তবে আপনার ওয়েবসাইটটি আমার GMail ইনবক্স পৃষ্ঠাটির জন্য অনুরোধ করতে পারে এবং আমার সমস্ত ইমেলটি পড়তে পারে। এটা ভয়ানক হবে।

— কোয়ান্টিন

Answer 2

আমারও অনুরূপ সমস্যা ছিল এবং আমার জন্য এটি গ্রহণের শেষের প্রতিক্রিয়ায় নিম্নলিখিত HTTP শিরোনাম যুক্ত করতে সিদ্ধ হয়ে গেছে :

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

আপনি *শেষেটি না ব্যবহার করতে পছন্দ করতে পারেন তবে কেবল হোস্টের ডোমেন নামটি ডেটা প্রেরণ করছেন। মত*.example.com

আপনি যখন সার্ভারের কনফিগারেশনটিতে অ্যাক্সেস পেয়ে থাকেন তবে এটি কেবল তখনই সম্ভব।

Comments

অ্যাঙ্গুলারজেসে আমি নতুন। দয়া করে আমাকে বলতে পারেন কোথায় এটি বাস্তবায়ন করতে হবে?

— অঙ্কিত

@ অঙ্কিত আপনাকে এই হেডারগুলি সার্ভারে যুক্ত করতে হবে, অ্যাঙ্গুলারজেএস-এ নয়।

— ফিলিপ

@ টেকক্রাভার - আপনার সার্ভারের কনফিগারেশনে অপারেশনাল অ্যাক্সেসের দরকার নেই - আপনার স্ক্রিপ্টের মধ্যে থেকে কেবল শিরোনামগুলি পাস করুন। আপনার যদি পিএইচপি ব্যাকেন্ড থাকে তবে তা হবেheader('Access-Control-Allow-Origin: *');

— ডেভিডকনরড

@ ডেভিডকনরাদ: আমি পুরো অ্যাপটি কৌণিক ভি 4 তে তৈরি করেছি। এই শিরোলেখটি আমাকে কোথায় অন্তর্ভুক্ত করতে হবে তা আপনি বলতে পারেন: /

— পিগগার্ল

@ পাইগার্ল, আমি বিশ্বাস করি আপনি ক্লায়েন্টকে কৌণিক করে তুলেছেন? আপনাকে কীভাবে এবং কোথায় প্রযুক্তির উপর নির্ভর করে রেসপন্স সার্ভারসাইডে শিরোনাম যুক্ত করতে হবে। যদি একটি পিএইচপি স্ক্রিপ্ট আপনি একটি কৌণিক থেকে কল Http.get()বা অনুরূপ, অ্যাড header('Access-Control-Allow-Origin: *')প্রকৃত প্রতিক্রিয়া, তাদেরকে JSON, কি কি কখনো বলা পিএইচপি স্ক্রিপ্ট (অর্থাত খুব প্রথম আউটপুট আগে আপনি আউটপুট।

— davidkonrad

Answer 3

ফ্লিকার জসনপ গ্রহণের জন্য সংস্থান পরিষেবাটি ব্যবহার করার চেষ্টা করুন:

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

ওয়েব অ্যাপ্লিকেশন সুরক্ষা মডেল নীতি যা একই উত্স নীতি নীতিমালার অধীনে এই সমস্যাটি দেখা দেয়, একটি ওয়েব ব্রাউজার প্রথম ওয়েব পৃষ্ঠায় থাকা স্ক্রিপ্টগুলিকে দ্বিতীয় ওয়েব পৃষ্ঠায় ডেটা অ্যাক্সেস করার অনুমতি দেয়, তবে কেবলমাত্র উভয় ওয়েব পৃষ্ঠারই একই উত্স রয়েছে। তার অর্থ রিকোয়েস্টর অবশ্যই অনুরোধকারী সাইটের সঠিক হোস্ট, প্রোটোকল এবং পোর্টের সাথে মেলে।

এই সিওআরএস শিরোনাম ইস্যুটি আসার জন্য আমাদের কাছে একাধিক বিকল্প রয়েছে।

1. প্রক্সি ব্যবহার করে - এই সমাধানে আমরা একটি প্রক্সি চালাব যে অনুরোধটি প্রক্সিটির মধ্য দিয়ে গেলে এটি প্রদর্শিত হবে যেন এটি কিছু একই উত্স। আপনি যদি নোডজেএস ব্যবহার করেন তবে প্রক্সি স্টাফ করতে কর্স -যে কোনও জায়গায় ব্যবহার করতে পারেন । https://www.npmjs.com/package/cors- कहींও ।

   উদাহরণ : -

   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. জেএসএনপি - জেএসএনপি হ'ল ক্রস-ডোমেন সংক্রান্ত সমস্যা নিয়ে চিন্তা না করে জেএসএন ডেটা প্রেরণের জন্য একটি পদ্ধতি t এটি এক্সএমএলএইচটিপিআরকোয়েস্ট অবজেক্টটি ব্যবহার করে না t <script>পরিবর্তে ট্যাগটি ব্যবহার করে। https://www.w3schools.com/js/js_json_jsonp.asp

3. সার্ভার সাইড - সার্ভারের দিকে আমাদের ক্রস-আর্জি অনুরোধগুলি সক্ষম করতে হবে। প্রথমে আমরা প্রিফ্লাইটাইটেড অনুরোধগুলি (বিকল্পগুলি) পেয়ে যাব এবং আমাদের অনুরোধটি স্ট্যাটাস কোড 200 (ওকে) মঞ্জুরি দেওয়া দরকার ।

   প্রকৃত অনুরোধগুলি প্রেরণে নিরাপদ কিনা তা নির্ধারণ করার জন্য প্রথমে অন্য ডোমেনের সংস্থানটিতে একটি HTTP বিকল্পগুলির অনুরোধ শিরোনাম প্রেরণ করুন। ক্রস-সাইট অনুরোধগুলি এর মতো প্রাক-আলোকিত হয় যেহেতু তাদের ব্যবহারকারীর ডেটাতে অন্তর্ভুক্ত থাকতে পারে। বিশেষত, যদি কোনও জিইটি বা পোষ্ট ব্যতীত অন্য পদ্ধতি ব্যবহার করে তবে একটি অনুরোধ প্রিফ্লাইটেড। এছাড়াও, যদি POST অ্যাপ্লিকেশন / x-www-form-urlencoded, মাল্টিপার্ট / ফর্ম-ডেটা, বা পাঠ্য / প্লেইন ব্যতীত কোনও সামগ্রী-প্রকারের সাথে অনুরোধ ডেটা প্রেরণ করতে ব্যবহৃত হয়, যেমন যদি POST অনুরোধটি সার্ভারে একটি এক্সএমএল পেলোড প্রেরণ করে অ্যাপ্লিকেশন / এক্সএমএল বা পাঠ্য / এক্সএমএল ব্যবহার করে, তারপরে অনুরোধটি পূর্বনির্ধারিত। এটি অনুরোধে কাস্টম শিরোলেখ সেট করে (উদাহরণস্বরূপ অনুরোধটি শিরোনাম যেমন এক্স-পিংগথার ব্যবহার করে)

   আপনি যদি বসন্তটি ব্যবহার করেন তবে বেলো কোড যুক্ত করলে সমস্যাটি সমাধান হবে। এখানে আমি সিএসআরএফ টোকেনটি অক্ষম করে দিয়েছি যা আপনার প্রয়োজন অনুযায়ী সক্ষম / অক্ষম করার বিষয় নয়।

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

নোড জেএস-এ CORS সক্ষম করার বিষয়ে আপনি আরও বিশদ পেতে পারেন

Answer 6

আমার নিজের উত্তর দেওয়া।

CORS কৌণিক জেএস + পোস্টে সহজ করুন

ভালভাবে অবশেষে আমি এই কাজটি করতে এসেছি: আইইয়ের সাথে এটি কাজ করার কারণ হ'ল আইই প্রথমে অনুমতি চেয়ে জিজ্ঞাসা করার জন্য প্রিফলাইট অনুরোধের পরিবর্তে সরাসরি একটি পোষ্ট প্রেরণ করে। তবে আমি এখনও জানি না কেন ফিল্টার কোনও বিকল্পের অনুরোধ পরিচালনা করতে সক্ষম হয় নি এবং ফিল্টারটিতে বর্ণিত নয় এমন ডিফল্ট শিরোনাম দ্বারা প্রেরণ করে (কেবলমাত্র এটির ক্ষেত্রে একটি ওভাররাইডের মতো মনে হচ্ছে ... সম্ভবত কোনও বিশ্রামের জিনিস) ।)

সুতরাং আমি আমার বিশ্রাম পরিষেবাতে একটি বিকল্প পথ তৈরি করেছি যা পুনরায় লিখতে লিখতে প্রতিক্রিয়া শিরোনাম ব্যবহার করে শিরোনামকে অন্তর্ভুক্ত করে

এর আগে যদি কেউ এর মুখোমুখি হয় তবে আমি এখনও এটি করার পরিষ্কার উপায়টি সন্ধান করছি।

Answer 7

অ্যাপাচি / এইচটিটিপিডি বেশিরভাগ উদ্যোগে বা আপনি বাড়িতে সেন্টোস / ইত্যাদি ব্যবহার করছেন বলে মনে হয়। সুতরাং, যদি আপনার কাছে এটি থাকে তবে প্রয়োজনীয় সিওআরএস শিরোনাম যুক্ত করতে খুব সহজেই একটি প্রক্সি করতে পারেন।

সাম্প্রতিককালে বেশ কয়েকবার এটি সহ্য করার কারণে আমার এখানে একটি ব্লগ পোস্ট রয়েছে । তবে গুরুত্বপূর্ণ বিটটি আপনার /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 / সোমারপথের নীচে URL: সবগুলি অনুরোধ HTTP: // টার্গেট-আইপি: 8080 / সামারপাথ ( সিওআরএস সমর্থন ছাড়াই এপিআই) যাওয়ার এবং তারা সঠিক অ্যাক্সেস-নিয়ন্ত্রণ-অনুমতি- দিয়ে ফিরে আসে অরিজিনাল শিরোনাম তাদের আপনার ওয়েব অ্যাপ্লিকেশন দিয়ে কাজ করার অনুমতি দেয়।

অবশ্যই আপনি পোর্টগুলি পরিবর্তন করতে পারেন এবং সোমারপ্যাথের পরিবর্তে পুরো সার্ভারটিকে লক্ষ্য করতে পারেন যদি আপনি চান।

Answer 8

এই উত্তরটি CORS সমর্থন করে না এমন workpout API গুলি করার দুটি উপায়ের বাহ্যরেখা দেয়:

• একটি কর্স প্রক্সি ব্যবহার করুন Use
• যদি API সমর্থন করে তবে 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>

আরও তথ্যের জন্য, দেখুন

• গিটহাব: যে কোনও জায়গায় সিওআরএস

---

যদি API এটিকে সমর্থন করে তবে 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;
 }) 

পিএলএনকেআর- এর ডেমো

আরও তথ্যের জন্য, দেখুন

• AngularJS $ HTTP পরিষেবা API রেফারেন্স - $ 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

"এবং আপনার ওয়েবএপিসিফিগ ফাইলে নিম্নলিখিত কোড যুক্ত করুন" - প্রশ্নটি ফ্লিকারকে একটি অনুরোধ করার বিষয়ে about তাদের সার্ভারগুলি ওপি-র নিয়ন্ত্রণে নেই। ফ্লিকার সম্ভবত এএসপি.এনইটি ব্যবহার করছে না।

— কোয়ান্টিন

Answer 10

আমরা এনজিআরএস মডিউলটি ব্যবহার করে সীমান্তে সিওআরএস সক্ষম করতে পারি। তবে সবচেয়ে গুরুত্বপূর্ণ, নিয়ামকটিতে এজাক্স অনুরোধ করার সময় আমাদের এই কোডের টুকরো থাকা উচিত,

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

এছাড়াও, আপনাকে অবশ্যই স্ক্রিপ্ট অংশে এনজিআরএসডি সিডিএন যুক্ত করতে হবে এবং অ্যাপ্লিকেশন মডিউলে নির্ভরতা হিসাবে যুক্ত করতে হবে।

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

তারপরে অ্যাপ্লিকেশন মডিউল নির্ভরতা বিভাগে "এনজিআরসিওর" ব্যবহার করুন

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