एपीआई प्रॉक्सी में सीओआरएस सपोर्ट जोड़ना

Apigee Edge दस्तावेज़ देखा जा रहा है.
Apigee X दस्तावेज़ पर जाएं.
जानकारी

सीओआरएस (क्रॉस-ऑरिजिन रिसॉर्स शेयरिंग) एक स्टैंडर्ड तरीका है. इसकी मदद से, किसी वेब पेज पर बनाए गए JavaScript XMLHttpRequest (XHR) कॉल को, नॉन-ऑरिजिन डोमेन के रिसॉर्स के साथ इंटरैक्ट करने की अनुमति मिलती है. सीओआरएस, "एक ही ऑरिजिन से जुड़ी नीति" के लिए आम तौर पर लागू किया जाने वाला एक समाधान है. इसे सभी ब्राउज़र लागू करते हैं. उदाहरण के लिए, अगर ब्राउज़र में JavaScript कोड का इस्तेमाल करके, Twitter API को XHR कॉल किया जाता है, तो कॉल फ़ेल हो जाएगा. इसकी वजह यह है कि आपके ब्राउज़र पर पेज को दिखाने वाला डोमेन और Twitter API को उपलब्ध कराने वाला डोमेन, दोनों एक जैसे नहीं हैं. अगर सर्वर, क्रॉस-ऑरिजिन रिसॉर्स शेयरिंग की सुविधा देना चाहते हैं, तो सीओआरएस से सर्वर को "ऑप्ट-इन" करने की अनुमति देकर इस समस्या का समाधान मिलता है.

वीडियो: एपीआई प्रॉक्सी पर सीओआरएस चालू करने का तरीका जानने के लिए यह छोटा सा वीडियो देखें.

सीओआरएस के लिए सामान्य इस्तेमाल का उदाहरण

नीचे दिया गया 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 प्रॉक्सी बनाया जाए, जो सर्विस एपीआई को बैक एंड पर कॉल करता है. याद रखें कि Edge, क्लाइंट (इस मामले में एक ब्राउज़र) और बैकएंड एपीआई (सेवा) के बीच होता है. एपीआई प्रॉक्सी सर्वर पर काम करता है, ब्राउज़र पर नहीं. इसलिए, यह सेवा को कॉल कर सकता है. इसके बाद, आपको सिर्फ़ टारगेटएंडपॉइंट रिस्पॉन्स में सीओआरएस हेडर अटैच करने होंगे. जब तक ब्राउज़र सीओआरएस के साथ काम करता है, तब तक ये हेडर ब्राउज़र को बताते हैं कि एक ही ऑरिजिन से जुड़ी नीति को "ढीला" करना सही है, जिससे क्रॉस-ऑरिजिन एपीआई कॉल को कामयाब होने में मदद मिलती है.

सीओआरएस सपोर्ट के साथ प्रॉक्सी बनाने के बाद, क्लाइंट-साइड कोड में बैकएंड सेवा के बजाय, एपीआई प्रॉक्सी यूआरएल पर कॉल किया जा सकता है. उदाहरण के लिए:

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

एपीआई के नए प्रॉक्सी सर्वर में, सीओआरएस जोड़ें नीति को अटैच करना

आपके पास एपीआई प्रॉक्सी में सीओआरएस सपोर्ट जोड़ने का विकल्प है. इसके लिए, एपीआई प्रॉक्सी में "सीओआरएस जोड़ें" नीति अटैच करें. इस नीति को जोड़ने के लिए, 'प्रॉक्सी बनाएं' विज़र्ड के सुरक्षा पेज में सीओआरएस हेडर जोड़ें चेकबॉक्स चुनें.

इस चेकबॉक्स को चुनने पर, सीओआरएस जोड़ें नाम की नीति, सिस्टम में अपने-आप जुड़ जाती है. साथ ही, उसे TargetEndpoint रिस्पॉन्स के प्रीफ़्लो के साथ अटैच कर दिया जाता है, जैसा कि इस डायग्राम में दिखाया गया है:

नीतियों के तहत, नेविगेटर में सीओआरएस नीति जोड़ें. साथ ही, दाएं पैन में TargetEndpoint रिस्पॉन्स प्रीफ़्लो में अटैच करें

सीओआरएस जोड़ें नीति को assignMessage नीति के तौर पर लागू किया गया है, जो रिस्पॉन्स में सही हेडर जोड़ती है. इसका मतलब है कि हेडर, ब्राउज़र को यह बताते हैं कि वह अपने रिसॉर्स को किन ऑरिजिन के साथ शेयर करेगा, वह किन तरीकों को स्वीकार करता है वगैरह. इन सीओआरएस हेडर के बारे में ज़्यादा जानने के लिए, क्रॉस-ऑरिजिन रिसॉर्स शेयरिंग W3C सुझाव पर जाएं.

आपको नीति में इस तरह बदलाव करना होगा:

  • Access-Control-Allow-Headers हेडर में content-type और authorization हेडर (बुनियादी पुष्टि या OAuth2 के लिए ज़रूरी) जोड़ें, जैसा कि नीचे दिए गए कोड में दिखाया गया है.
  • OAuth2 की पुष्टि करने के लिए, आपको आरएफ़सी का पालन न करने वाले व्यवहार को ठीक करने के लिए कुछ कदम उठाने पड़ सकते हैं.
  • हमारा सुझाव है कि आप <Add> के बजाय, सीओआरएस हेडर सेट करने के लिए <Set> का इस्तेमाल करें, जैसा कि नीचे दिए गए अंश में दिखाया गया है. <Add> का इस्तेमाल करते समय, अगर Access-Control-Allow-Origin हेडर पहले से मौजूद है, तो आपको यह गड़बड़ी मिलेगी:

    The 'Access-Control-Allow-Origin' 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>

किसी मौजूदा प्रॉक्सी में सीओआरएस हेडर जोड़ना

आपको मैन्युअल तरीके से 'मैसेज असाइन करें' की नई नीति बनानी होगी. इसके बाद, पिछले सेक्शन में सीओआरएस जोड़ें नीति का कोड कॉपी करना होगा. इसके बाद, एपीआई प्रॉक्सी के TargetEndpoint के रिस्पॉन्स प्रीफ़्लो में नीति जोड़ें. हेडर की वैल्यू में ज़रूरत के हिसाब से बदलाव किए जा सकते हैं. नीतियां बनाने और उन्हें अटैच करने के बारे में ज़्यादा जानकारी के लिए, नीति क्या है? देखें.

सीओआरएस प्रीफ़्लाइट अनुरोधों को मैनेज करना

सीओआरएस प्रीफ़्लाइट का मतलब है, सर्वर को एक अनुरोध भेजकर यह पुष्टि की जाती है कि वह सीओआरएस के साथ काम करता है या नहीं. सामान्य प्रीफ़्लाइट रिस्पॉन्स में यह शामिल होता है कि सर्वर कौनसे ऑरिजिन से सीओआरएस अनुरोध स्वीकार करेगा, सीओआरएस अनुरोधों के लिए काम करने वाले एचटीटीपी तरीकों की सूची, रिसॉर्स अनुरोध के हिस्से के तौर पर इस्तेमाल किए जा सकने वाले हेडर, ज़्यादा से ज़्यादा प्रीफ़्लाइट रिस्पॉन्स को कैश मेमोरी में सेव किया जाएगा वगैरह. अगर यह सेवा सीओआरएस के लिए सहायता उपलब्ध नहीं कराती या क्लाइंट के ऑरिजिन से क्रॉस-ऑरिजिन अनुरोधों को स्वीकार नहीं करती, तो ब्राउज़र की क्रॉस-ऑरिजिन नीति लागू हो जाएगी. साथ ही, उस सर्वर पर होस्ट किए गए रिसॉर्स के साथ इंटरैक्ट करने के लिए, क्लाइंट के क्रॉस-डोमेन के अनुरोध स्वीकार नहीं किए जाएंगे.

आम तौर पर, सीओआरएस प्रीफ़्लाइट अनुरोध, एचटीटीपी OPTIONS तरीके से किए जाते हैं. जब सीओआरएस के साथ काम करने वाले किसी सर्वर को OPTIONS अनुरोध मिलता है, तो वह क्लाइंट को सीओआरएस हेडर का एक सेट दिखाता है. इससे पता चलता है कि सीओआरएस सपोर्ट का लेवल क्या है. इस हैंडशेक की वजह से, क्लाइंट को पता चलता है कि नॉन-ऑरिजिन डोमेन से किस तरह का अनुरोध किया जा सकता है.

प्रीफ़्लाइट के बारे में ज़्यादा जानकारी के लिए, क्रॉस-ऑरिजिन रिसॉर्स शेयरिंग W3C का सुझाव देखें. इसके अलावा, सीओआरएस पर कई ऐसे ब्लॉग और लेख मौजूद हैं जिन्हें रेफ़र किया जा सकता है.

Apigee में, सीओआरएस प्रीफ़्लाइट समाधान शामिल नहीं है. हालांकि, इसे लागू किया जा सकता है, जैसा कि इस सेक्शन में बताया गया है. इसका मकसद प्रॉक्सी को कंडिशनल फ़्लो में, 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>

इस प्रॉक्सीEndpoint के मुख्य हिस्से इस तरह हैं:

  • OPTIONS अनुरोध के लिए एक शर्त के साथ NULL टारगेट के लिए एक RouteTerms बनाया जाता है. ध्यान दें कि कोई TargetEndpoint नहीं बताया गया है. अगर OPTIONS अनुरोध मिलता है, Origin और Access-Control-Request-Method से जुड़े अनुरोध हेडर शून्य नहीं हैं, तो प्रॉक्सी, क्लाइंट को रिस्पॉन्स के तौर पर तुरंत सीओआरएस हेडर दिखाता है. ऐसा, असल डिफ़ॉल्ट "बैकएंड" टारगेट को बायपास करते हुए किया जाता है. फ़्लो की स्थितियों और रूट रूल की जानकारी के लिए, फ़्लो वैरिएबल वाली शर्तें देखें.

    <RouteRule name="NoRoute">
        <Condition>request.verb == "OPTIONS" AND request.header.origin != null AND request.header.Access-Control-Request-Method != null</Condition>
    </RouteRule>
    
  • एक OptionPreFlight फ़्लो बनाया जाता है, जिसमें सीओआरएस हेडर वाली सीओआरएस नीति जोड़ी जाती है. ऐसा तब किया जाता है, जब OPTIONS अनुरोध मिलता है और Origin और Access-Control-Request-Method के अनुरोध के हेडर शून्य नहीं होते हैं.

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

सीओआरएस सलूशन के सैंपल का इस्तेमाल करना

सीओआरएस का सैंपल, शेयर किए गए फ़्लो के तौर पर लागू किया गया, GitHub पर उपलब्ध है. शेयर किए गए फ़्लो बंडल को अपने एनवायरमेंट में इंपोर्ट करें और फ़्लो हुक का इस्तेमाल करके या सीधे एपीआई प्रॉक्सी फ़्लो से अटैच करें. ज़्यादा जानकारी के लिए, सैंपल के साथ दी गई CORS-Shared-FLow README फ़ाइल देखें.