การเพิ่มการรองรับ CORS ไปยังพร็อกซี API

คุณกำลังดูเอกสารประกอบของ Apigee Edge
ไปที่ เอกสารประกอบของ Apigee X info

CORS (กลไกการแชร์ทรัพยากรแบบข้ามต้นทาง) เป็นกลไกมาตรฐานที่อนุญาตให้การเรียก JavaScript XMLHttpRequest (XHR) ที่ดำเนินการในหน้าเว็บโต้ตอบกับทรัพยากรจากโดเมนที่ไม่ใช่ต้นทาง CORS เป็นโซลูชันที่ใช้กันโดยทั่วไปเพื่อแก้ปัญหานโยบายต้นทางเดียวกันที่ เบราว์เซอร์ทั้งหมดบังคับใช้ ตัวอย่างเช่น หากคุณทำการเรียก XHR ไปยัง Twitter API จากโค้ด JavaScript ที่ดำเนินการในเบราว์เซอร์ การเรียกจะล้มเหลว เนื่องจากโดเมนที่แสดงหน้าเว็บใน เบราว์เซอร์ของคุณไม่ใช่โดเมนเดียวกับที่แสดง Twitter API CORS มีโซลูชันสำหรับ ปัญหานี้โดยอนุญาตให้เซิร์ฟเวอร์ "เลือกใช้" หากต้องการแชร์ทรัพยากรแบบข้ามต้นทาง

วิดีโอ: ดูวิดีโอสั้นๆ เพื่อเรียนรู้วิธีเปิดใช้ CORS ในพร็อกซี API

กรณีการใช้งานทั่วไปสำหรับ 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>

วิธีแก้ปัญหาหนึ่งคือการสร้างพร็อกซี API ของ Apigee ที่เรียกใช้ API ของบริการใน แบ็กเอนด์ โปรดทราบว่า Edge อยู่ระหว่างไคลเอ็นต์ (เบราว์เซอร์ในกรณีนี้) กับ API แบ็กเอนด์ (บริการ) เนื่องจากพร็อกซี API ทำงานบนเซิร์ฟเวอร์ ไม่ใช่ในเบราว์เซอร์ จึง เรียก บริการได้สำเร็จ จากนั้นสิ่งที่คุณต้องทำ คือแนบส่วนหัว CORS กับการตอบกลับ TargetEndpoint ตราบใดที่เบราว์เซอร์รองรับ CORS, ส่วนหัวเหล่านี้จะส่งสัญญาณไปยังเบราว์เซอร์ว่า "ผ่อนปรน" นโยบายต้นทางเดียวกันได้ ซึ่งจะทำให้การเรียก API แบบข้ามต้นทางสำเร็จ

เมื่อสร้างพร็อกซีที่รองรับ CORS แล้ว คุณจะเรียกใช้ URL ของพร็อกซี API แทนบริการแบ็กเอนด์ ในโค้ดฝั่งไคลเอ็นต์ได้ เช่น

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

การแนบนโยบายเพิ่ม CORS กับพร็อกซี API ใหม่

คุณสามารถเพิ่มการรองรับ CORS ลงในพร็อกซี API ได้โดยการแนบนโยบาย "เพิ่ม CORS" กับพร็อกซี API เมื่อสร้าง หากต้องการเพิ่มนโยบายนี้ ให้เลือกช่องทำเครื่องหมายเพิ่มส่วนหัว CORS ใน หน้าความปลอดภัยของวิซาร์ดสร้างพร็อกซี

เมื่อเลือกช่องทำเครื่องหมายนี้ ระบบจะเพิ่มนโยบายที่ชื่อว่า "เพิ่ม CORS" ลงในระบบโดยอัตโนมัติ และแนบกับ PreFlow ของการตอบกลับ TargetEndpoint ดังที่แสดงในรูปภาพต่อไปนี้

เพิ่มนโยบาย CORS ลงใน Navigator ภายใต้ Policies และแนบไปกับ TargetEndpoint response preflow ในแผงด้านขวา

นโยบายเพิ่ม CORS ได้รับการติดตั้งใช้งานเป็นนโยบาย AssignMessage ซึ่ง จะเพิ่มส่วนหัวที่เหมาะสมลงในการตอบกลับ โดยพื้นฐานแล้ว ส่วนหัวจะแจ้งให้เบราว์เซอร์ทราบว่าเบราว์เซอร์จะแชร์ทรัพยากรกับต้นทางใด เมธอดใดที่ยอมรับ และอื่นๆ คุณสามารถอ่านเพิ่มเติมเกี่ยวกับส่วนหัว CORS เหล่านี้ได้ใน คำแนะนำเกี่ยวกับกลไกการแชร์ทรัพยากรข้ามโดเมนของ W3C

คุณควรแก้ไขนโยบายดังนี้

  • เพิ่มส่วนหัว content-type และ authorization (จำเป็นสำหรับการรองรับการตรวจสอบสิทธิ์พื้นฐานหรือ OAuth2) ลงในส่วนหัว Access-Control-Allow-Headers ดังที่แสดงในข้อมูลโค้ดด้านล่าง
  • สำหรับการตรวจสอบสิทธิ์ OAuth2 คุณอาจต้องดำเนินการเพื่อแก้ไข ลักษณะการทำงานที่ไม่เป็นไปตาม RFC
  • เราขอแนะนำให้คุณใช้ <Set> เพื่อตั้งค่าส่วนหัว CORS แทน <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 ลงในพร็อกซีที่มีอยู่

คุณต้องสร้างนโยบาย Assign Message ใหม่ด้วยตนเองและคัดลอกโค้ดสำหรับนโยบายเพิ่ม CORS ที่ระบุไว้ในส่วนก่อนหน้าลงในนโยบายดังกล่าว จากนั้นแนบนโยบายกับ PreFlow ของการตอบกลับ TargetEndpoint ของพร็อกซี API คุณสามารถแก้ไขค่าส่วนหัวได้ตามต้องการ ดูข้อมูลเพิ่มเติมเกี่ยวกับการสร้างและการแนบนโยบายได้ที่นโยบายคืออะไร

การจัดการคำขอ CORS ตรวจสอบล่วงหน้า

CORS การตรวจสอบล่วงหน้า หมายถึงการส่งคำขอไปยังเซิร์ฟเวอร์เพื่อตรวจสอบว่าเซิร์ฟเวอร์ รองรับ CORS หรือไม่ การตอบกลับการตรวจสอบล่วงหน้าโดยทั่วไปจะระบุต้นทางที่เซิร์ฟเวอร์จะยอมรับคำขอ CORS รายการเมธอด HTTP ที่รองรับคำขอ CORS, ส่วนหัวที่ใช้เป็นส่วนหนึ่งของคำขอทรัพยากร, เวลาสูงสุดที่จะแคชการตอบกลับการตรวจสอบล่วงหน้า และ อื่นๆ หากบริการไม่ได้ระบุการรองรับ CORS หรือไม่ต้องการยอมรับคำขอแบบข้ามต้นทาง จากต้นทางของไคลเอ็นต์ ระบบจะบังคับใช้นโยบายแบบข้ามต้นทางของเบราว์เซอร์ และ คำขอข้ามโดเมนใดก็ตามที่ส่งจากไคลเอ็นต์เพื่อโต้ตอบกับทรัพยากรที่โฮสต์อยู่ในเซิร์ฟเวอร์นั้น จะล้มเหลว

โดยปกติแล้ว คำขอ CORS ตรวจสอบล่วงหน้าจะส่งด้วยเมธอด HTTP OPTIONS เมื่อเซิร์ฟเวอร์ที่ รองรับ 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 นี้มีดังนี้

  • สร้าง RouteRule ไปยังเป้าหมาย NULL โดยมีเงื่อนไขสำหรับคำขอ OPTIONS โปรดทราบว่า ไม่ได้ระบุ TargetEndpoint หากได้รับคำขอ OPTIONS และส่วนหัวของคำขอ Origin และ Access-Control-Request-Method ไม่เป็นค่าว่าง พร็อกซีจะส่งคืนส่วนหัว CORS ในการตอบกลับไปยังไคลเอ็นต์ทันที (ข้ามเป้าหมาย "แบ็กเอนด์" เริ่มต้นจริง) ดูรายละเอียดเกี่ยวกับเงื่อนไขโฟลว์และ RouteRule ได้ที่ เงื่อนไขที่มีตัวแปรโฟลว์

    <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 และส่วนหัวของคำขอ 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>

การใช้โซลูชัน CORS ตัวอย่าง

โซลูชัน CORS ตัวอย่างที่ติดตั้งใช้งานเป็นโฟลว์ที่แชร์มีให้บริการใน GitHub นำเข้าชุดโฟลว์ที่แชร์ไปยังสภาพแวดล้อมและแนบโดยใช้ฮุกโฟลว์หรือแนบกับโฟลว์พร็อกซี API โดยตรง ดูรายละเอียดได้ที่ไฟล์ README ของ CORS-Shared-FLow ที่มาพร้อมกับตัวอย่าง