একটি API প্রক্সিতে CORS সমর্থন যোগ করা হচ্ছে

আপনি Apigee Edge-এর ডকুমেন্টেশন দেখছেন।
Apigee X ডকুমেন্টেশন .info- তে যান।

CORS (ক্রস-অরিজিন রিসোর্স শেয়ারিং) হলো একটি স্ট্যান্ডার্ড ব্যবস্থা যা একটি ওয়েব পেজে এক্সিকিউট হওয়া জাভাস্ক্রিপ্ট XMLHttpRequest (XHR) কলগুলোকে নন-অরিজিন ডোমেইনের রিসোর্সের সাথে ইন্টারঅ্যাক্ট করার সুযোগ দেয়। সমস্ত ব্রাউজার দ্বারা বলবৎ করা " সেম-অরিজিন পলিসি "-র একটি বহুল ব্যবহৃত সমাধান হলো CORS। উদাহরণস্বরূপ, আপনি যদি আপনার ব্রাউজারে এক্সিকিউট হওয়া জাভাস্ক্রিপ্ট কোড থেকে টুইটার এপিআই-তে একটি XHR কল করেন, তবে কলটি ব্যর্থ হবে। এর কারণ হলো, যে ডোমেইনটি আপনার ব্রাউজারে পেজটি সার্ভ করছে, সেটি টুইটার এপিআই সার্ভকারী ডোমেইনের মতো নয়। CORS এই সমস্যার একটি সমাধান প্রদান করে, যা সার্ভারগুলোকে ক্রস-অরিজিন রিসোর্স শেয়ারিং প্রদান করতে চাইলে "অপট-ইন" করার সুযোগ দেয়।

CORS-এর সাধারণ ব্যবহার

নিম্নলিখিত JQuery কোডটি একটি কাল্পনিক টার্গেট সার্ভিসকে কল করে। যদি এটি কোনো ব্রাউজারের প্রেক্ষাপট থেকে (একটি ওয়েব পেজ থেকে) চালানো হয়, তাহলে same-origin policy-র কারণে কলটি ব্যর্থ হবে:

<script>
var url = "http://service.example.com";
$(document).ready(function(){
  $("button").click(function(){
    $.ajax({
        type:"GET",
        url:url,
        async:true,
        dataType: "json",
           success: function(json) {
              // Parse the response.
              // Do other things.
           },
           error: function(xhr, status, err) {
              // This is where we end up!
            }
    });
  });
});
</script>

এই সমস্যার একটি সমাধান হলো একটি Apigee API প্রক্সি তৈরি করা, যা ব্যাকএন্ডে থাকা সার্ভিস API-কে কল করে। মনে রাখবেন যে, Edge ক্লায়েন্ট (এই ক্ষেত্রে একটি ব্রাউজার) এবং ব্যাকএন্ড API (সার্ভিস)-এর মাঝে অবস্থান করে। যেহেতু API প্রক্সিটি ব্রাউজারে নয়, বরং সার্ভারে চলে, তাই এটি সফলভাবে সার্ভিসটিকে কল করতে পারে । এরপর, আপনাকে শুধু TargetEndpoint রেসপন্সের সাথে CORS হেডার যুক্ত করতে হবে। যতক্ষণ ব্রাউজারটি CORS সাপোর্ট করে, ততক্ষণ এই হেডারগুলো ব্রাউজারকে সংকেত দেয় যে তার সেম-অরিজিন পলিসি "শিথিল" করা যেতে পারে, যার ফলে ক্রস-অরিজিন API কলটি সফল হয়।

একবার CORS সমর্থন সহ প্রক্সিটি তৈরি হয়ে গেলে, আপনি আপনার ক্লায়েন্ট-সাইড কোডে ব্যাকএন্ড সার্ভিসের পরিবর্তে API প্রক্সি URL-টি কল করতে পারবেন। উদাহরণস্বরূপ:

<script>
var url = "http://myorg-test.apigee.net/v1/example";
$(document).ready(function(){
  $("button").click(function(){
    $.ajax({
        type:"GET",
        url:url,
        async:true,
        dataType: "json",
           success: function(json) {
              // Parse the response.
              // Do other things.
           },
           error: function(xhr, status, err) {
              // This time, we do not end up here!
            }
    });
  });
});
</script>

একটি নতুন এপিআই প্রক্সিতে একটি অ্যাড সিওআরএস (Add CORS) পলিসি সংযুক্ত করা

একটি এপিআই প্রক্সি তৈরি করার সময় সেটিতে একটি "অ্যাড CORS" পলিসি সংযুক্ত করে আপনি CORS সাপোর্ট যোগ করতে পারেন। এই পলিসিটি যোগ করতে, 'বিল্ড এ প্রক্সি' উইজার্ডের 'সিকিউরিটি' পেজে ' অ্যাড CORS হেডারস' চেকবক্সটি সিলেক্ট করুন।

যখন আপনি এই চেকবক্সটি নির্বাচন করেন, তখন 'Add CORS' নামক একটি পলিসি স্বয়ংক্রিয়ভাবে সিস্টেমে যুক্ত হয়ে যায় এবং TargetEndpoint রেসপন্স প্রিফ্লো-এর সাথে সংযুক্ত হয়, যেমনটি নিম্নলিখিত চিত্রে দেখানো হয়েছে:

অ্যাড CORS পলিসিটি একটি অ্যাসাইনমেসেজ পলিসি হিসেবে প্রয়োগ করা হয়, যা রেসপন্সে উপযুক্ত হেডারগুলো যোগ করে। মূলত, এই হেডারগুলো ব্রাউজারকে জানিয়ে দেয় যে এটি কোন কোন অরিজিনের সাথে তার রিসোর্স শেয়ার করবে, কোন কোন মেথড গ্রহণ করবে, ইত্যাদি। আপনি ক্রস-অরিজিন রিসোর্স শেয়ারিং W3C রিকমেন্ডেশন- এ এই CORS হেডারগুলো সম্পর্কে আরও পড়তে পারেন।

আপনাকে নীতিমালাটি নিম্নরূপভাবে সংশোধন করতে হবে:

• নিচের কোড অংশে দেখানো অনুযায়ী, বেসিক অথেন্টিকেশন বা OAuth2 সমর্থনের জন্য প্রয়োজনীয় content-type এবং authorization হেডারগুলো Access-Control-Allow-Headers হেডারে যোগ করুন।
• OAuth2 প্রমাণীকরণের জন্য, আপনাকে RFC-সম্মত নয় এমন আচরণ সংশোধন করার পদক্ষেপ নিতে হতে পারে।
• নিচের উদ্ধৃতাংশে দেখানো অনুযায়ী, <Add> এর পরিবর্তে <Set> ব্যবহার করে CORS হেডার সেট করার পরামর্শ দেওয়া হচ্ছে। <Add> ব্যবহার করলে, যদি Access-Control-Allow-Origin হেডারটি আগে থেকেই বিদ্যমান থাকে, তাহলে আপনি নিম্নলিখিত ত্রুটিটি পাবেন:

  The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed.

  আরও তথ্যের জন্য, CORS Error : header contains multiple values ​​'*, *', but only one is allowed দেখুন।

<AssignMessage async="false" continueOnError="false" enabled="true" name="add-cors">
    <DisplayName>Add CORS</DisplayName>
    <FaultRules/>
    <Properties/>
    <Set>
        <Headers>
            <Header name="Access-Control-Allow-Origin">{request.header.origin}</Header>
            <Header name="Access-Control-Allow-Headers">origin, x-requested-with, accept, content-type, authorization</Header>
            <Header name="Access-Control-Max-Age">3628800</Header>
            <Header name="Access-Control-Allow-Methods">GET, PUT, POST, DELETE</Header>
        </Headers>
    </Set>
    <IgnoreUnresolvedVariables>true</IgnoreUnresolvedVariables>
    <AssignTo createNew="false" transport="http" type="response"/>
</AssignMessage>

বিদ্যমান প্রক্সিতে CORS হেডার যোগ করা

আপনাকে ম্যানুয়ালি একটি নতুন 'অ্যাসাইন মেসেজ' পলিসি তৈরি করতে হবে এবং পূর্ববর্তী বিভাগে তালিকাভুক্ত 'অ্যাড কর্স' পলিসির কোডটি এতে কপি করতে হবে। তারপর, এপিআই প্রক্সির 'টার্গেটএন্ডপয়েন্ট'-এর রেসপন্স প্রিফ্লোতে পলিসিটি সংযুক্ত করুন। আপনি প্রয়োজন অনুযায়ী হেডার ভ্যালুগুলো পরিবর্তন করতে পারেন। পলিসি তৈরি এবং সংযুক্ত করার বিষয়ে আরও তথ্যের জন্য, 'পলিসি কী?' দেখুন।

CORS প্রিফ্লাইট অনুরোধগুলি পরিচালনা করা

CORS প্রিফ্লাইট বলতে কোনো সার্ভার CORS সমর্থন করে কিনা তা যাচাই করার জন্য সেখানে একটি অনুরোধ পাঠানোকে বোঝায়। সাধারণ প্রিফ্লাইট প্রতিক্রিয়াগুলির মধ্যে অন্তর্ভুক্ত থাকে: সার্ভারটি কোন কোন অরিজিন থেকে CORS অনুরোধ গ্রহণ করবে, CORS অনুরোধের জন্য সমর্থিত HTTP মেথডগুলির একটি তালিকা, রিসোর্স অনুরোধের অংশ হিসাবে ব্যবহারযোগ্য হেডারসমূহ, প্রিফ্লাইট প্রতিক্রিয়াটি সর্বোচ্চ কতক্ষণ ক্যাশ করা থাকবে এবং অন্যান্য বিষয়। যদি পরিষেবাটি CORS সমর্থনের কথা উল্লেখ না করে অথবা ক্লায়েন্টের অরিজিন থেকে ক্রস-অরিজিন অনুরোধ গ্রহণ করতে না চায়, তবে ব্রাউজারের ক্রস-অরিজিন নীতি প্রয়োগ করা হবে এবং সেই সার্ভারে হোস্ট করা রিসোর্সগুলির সাথে ইন্টারঅ্যাক্ট করার জন্য ক্লায়েন্ট থেকে করা যেকোনো ক্রস-ডোমেইন অনুরোধ ব্যর্থ হবে।

সাধারণত, CORS প্রিফ্লাইট অনুরোধগুলি HTTP OPTIONS মেথড ব্যবহার করে করা হয়। যখন CORS সমর্থনকারী কোনো সার্ভার একটি OPTIONS অনুরোধ গ্রহণ করে, তখন এটি ক্লায়েন্টের কাছে এক সেট CORS হেডার ফেরত পাঠায় যা তার CORS সমর্থনের স্তর নির্দেশ করে। এই হ্যান্ডশেকের ফলে, ক্লায়েন্ট জানতে পারে যে সে নন-অরিজিন ডোমেইন থেকে কী অনুরোধ করার অনুমতি পাবে।

প্রিফ্লাইট সম্পর্কে আরও তথ্যের জন্য, ক্রস-অরিজিন রিসোর্স শেয়ারিং (CORS) সংক্রান্ত W3C সুপারিশটি দেখুন। এছাড়াও, CORS বিষয়ে অসংখ্য ব্লগ এবং নিবন্ধ রয়েছে যা আপনি দেখতে পারেন।

Apigee-তে ডিফল্টভাবে কোনো CORS প্রিফ্লাইট সলিউশন অন্তর্ভুক্ত নেই, কিন্তু এই বিভাগে বর্ণিত পদ্ধতি অনুযায়ী এটি বাস্তবায়ন করা সম্ভব। এর উদ্দেশ্য হলো, প্রক্সি একটি শর্তসাপেক্ষ ফ্লো-এর মাধ্যমে একটি OPTIONS রিকোয়েস্ট মূল্যায়ন করবে। এরপর প্রক্সি ক্লায়েন্টের কাছে একটি উপযুক্ত প্রতিক্রিয়া ফেরত পাঠাতে পারে।

চলুন একটি নমুনা প্রবাহ দেখি, এবং তারপর প্রাক-উড্ডয়ন অনুরোধটি পরিচালনা করে এমন অংশগুলো নিয়ে আলোচনা করি:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<ProxyEndpoint name="default">
    <Description/>
    <Flows>
        <Flow name="OptionsPreFlight">
            <Request/>
            <Response>
                <Step>
                    <Name>add-cors</Name>
                </Step>
            </Response>
        <Condition>request.verb == "OPTIONS" AND request.header.origin != null AND request.header.Access-Control-Request-Method != null</Condition>
        </Flow>
    </Flows>

    <PreFlow name="PreFlow">
        <Request/>
        <Response/>

    </PreFlow>
    <HTTPProxyConnection>
        <BasePath>/v1/cnc</BasePath>
        <VirtualHost>default</VirtualHost>
        <VirtualHost>secure</VirtualHost>
    </HTTPProxyConnection>
    <RouteRule name="NoRoute">
        <Condition>request.verb == "OPTIONS" AND request.header.origin != null AND request.header.Access-Control-Request-Method != null</Condition>
    </RouteRule>
    <RouteRule name="default">
        <TargetEndpoint>default</TargetEndpoint>
   </RouteRule>
   <PostFlow name="PostFlow">
        <Request/>
        <Response/>
    </PostFlow>
</ProxyEndpoint>

এই ProxyEndpoint-এর মূল অংশগুলো নিম্নরূপ:

• OPTIONS অনুরোধের জন্য একটি শর্তসহ একটি NULL টার্গেটে একটি RouteRule তৈরি করা হয়। লক্ষ্য করুন যে, এখানে কোনো TargetEndpoint নির্দিষ্ট করা নেই। যদি OPTIONS অনুরোধটি গৃহীত হয় এবং Origin ও Access-Control-Request-Method অনুরোধ হেডারগুলো null না হয়, তাহলে প্রক্সিটি প্রকৃত ডিফল্ট "backend" টার্গেটকে বাইপাস করে ক্লায়েন্টের কাছে একটি প্রতিক্রিয়ায় অবিলম্বে CORS হেডারগুলো ফেরত পাঠায়। ফ্লো কন্ডিশন এবং RouteRule সম্পর্কে বিস্তারিত জানতে, “Conditions with flow variables ” দেখুন।
  
  

  <RouteRule name="NoRoute">
      <Condition>request.verb == "OPTIONS" AND request.header.origin != null AND request.header.Access-Control-Request-Method != null</Condition>
  </RouteRule>

• একটি OptionsPreFlight ফ্লো তৈরি করা হয় যা একটি OPTIONS অনুরোধ প্রাপ্ত হলে এবং Origin ও Access-Control-Request-Method অনুরোধ হেডারগুলি নাল না হলে, ফ্লোটিতে CORS হেডার সম্বলিত একটি Add CORS পলিসি যোগ করে।
  
  

   <Flow name="OptionsPreFlight">
              <Request/>
              <Response>
                  <Step>
                      <Name>add-cors</Name>
                  </Step>
              </Response>
          <Condition>request.verb == "OPTIONS" AND request.header.origin != null AND request.header.Access-Control-Request-Method != null</Condition>
   </Flow>

নমুনা CORS দ্রবণ ব্যবহার করে

একটি নমুনা CORS সমাধান, যা একটি শেয়ার্ড ফ্লো হিসাবে প্রয়োগ করা হয়েছে, গিটহাবে উপলব্ধ আছে। শেয়ার্ড ফ্লো বান্ডেলটি আপনার পরিবেশে ইম্পোর্ট করুন এবং ফ্লো হুক ব্যবহার করে অথবা সরাসরি এপিআই প্রক্সি ফ্লো-এর সাথে এটি সংযুক্ত করুন। বিস্তারিত জানতে, নমুনার সাথে প্রদত্ত CORS-Shared-FLow README ফাইলটি দেখুন।