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

আপনি Apigee Edge ডকুমেন্টেশন দেখছেন।
Apigee X ডকুমেন্টেশনে যান । তথ্য

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

ভিডিও: একটি API প্রক্সিতে CORS কীভাবে সক্ষম করবেন তা শিখতে একটি ছোট ভিডিও দেখুন।

CORS-এর জন্য সাধারণ ব্যবহারের ক্ষেত্রে

নিম্নলিখিত JQuery কোড একটি কাল্পনিক লক্ষ্য পরিষেবা কল. একটি ব্রাউজার (একটি ওয়েব পৃষ্ঠা) এর প্রেক্ষাপট থেকে কার্যকর করা হলে, একই-অরিজিন নীতির কারণে কলটি ব্যর্থ হবে:

<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কে কল করে। মনে রাখবেন যে এজ ক্লায়েন্ট (এই ক্ষেত্রে একটি ব্রাউজার) এবং ব্যাকএন্ড API (পরিষেবা) এর মধ্যে বসে। যেহেতু API প্রক্সি সার্ভারে কার্যকর হয়, ব্রাউজারে নয়, এটি সফলভাবে পরিষেবাটি কল করতে সক্ষম৷ তারপর, আপনাকে যা করতে হবে তা হল টার্গেটএন্ডপয়েন্ট প্রতিক্রিয়ার সাথে 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>

একটি নতুন API প্রক্সিতে একটি অ্যাড CORS নীতি সংযুক্ত করা হচ্ছে

আপনি একটি API প্রক্সিতে CORS সমর্থন যোগ করতে পারেন যখন আপনি এটি তৈরি করবেন তখন API প্রক্সিতে একটি "Add CORS" নীতি সংযুক্ত করে। এই নীতি যোগ করার জন্য, Build a Proxy উইজার্ডের নিরাপত্তা পৃষ্ঠায় CORS শিরোনাম যোগ করুন চেকবক্স নির্বাচন করুন।

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

নীতির অধীনে নেভিগেটরে CORS নীতি যোগ করুন এবং ডান প্যানে TargetEndpoint প্রতিক্রিয়া প্রিফ্লোতে সংযুক্ত করুন

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

আপনার নীতিটি নিম্নরূপ সংশোধন করা উচিত:

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

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

    আরও তথ্যের জন্য, CORS ত্রুটি দেখুন : হেডারে একাধিক মান '*, *' রয়েছে, কিন্তু শুধুমাত্র একটি অনুমোদিত । 

<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 নীতির জন্য কোডটি কপি করতে হবে। তারপরে, API প্রক্সির TargetEndpoint এর প্রতিক্রিয়া প্রিফ্লোতে নীতিটি সংযুক্ত করুন। আপনি প্রয়োজন অনুযায়ী হেডার মান পরিবর্তন করতে পারেন। নীতিগুলি তৈরি এবং সংযুক্ত করার বিষয়ে আরও তথ্যের জন্য, নীতি কী? .

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

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

সাধারণত, CORS প্রিফ্লাইট অনুরোধগুলি HTTP বিকল্প পদ্ধতিতে তৈরি করা হয়। যখন CORS সমর্থন করে এমন একটি সার্ভার একটি OPTIONS অনুরোধ পায়, তখন এটি ক্লায়েন্টকে 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 অনুরোধটি গৃহীত হয় এবং অরিজিন এবং অ্যাক্সেস-কন্ট্রোল-রিকোয়েস্ট-মেথড রিকোয়েস্ট হেডারগুলি শূন্য না হয়, প্রক্সি অবিলম্বে ক্লায়েন্টের প্রতিক্রিয়া হিসাবে CORS শিরোনামগুলি ফেরত দেয় (প্রকৃত ডিফল্ট "ব্যাকএন্ড" লক্ষ্য বাইপাস করে)। প্রবাহের অবস্থা এবং রাউটার রুলের বিশদ বিবরণের জন্য, প্রবাহ ভেরিয়েবল সহ শর্তগুলি দেখুন।

    <RouteRule name="NoRoute">
    <Condition>request.verb == "OPTIONS" AND request.header.origin != null AND request.header.Access-Control-Request-Method != null</Condition>
</RouteRule>
  • একটি OptionsPreFlight ফ্লো তৈরি করা হয় যা CORS শিরোনাম সমন্বিত একটি অ্যাড CORS নীতি যোগ করে, যদি একটি OPTIONS অনুরোধ গৃহীত হয় এবং অরিজিন এবং অ্যাক্সেস-কন্ট্রোল-রিকোয়েস্ট-মেথড রিকোয়েস্ট হেডার শূন্য না হয়।

     <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 সমাধান, একটি ভাগ করা প্রবাহ হিসাবে বাস্তবায়িত, GitHub এ উপলব্ধ। আপনার পরিবেশে শেয়ার্ড ফ্লো বান্ডিল আমদানি করুন এবং ফ্লো হুক ব্যবহার করে বা সরাসরি API প্রক্সি ফ্লোতে সংযুক্ত করুন৷ বিস্তারিত জানার জন্য, নমুনার সাথে প্রদত্ত CORS-Shared-flow README ফাইলটি দেখুন।