เกิดข้อผิดพลาดที่ไม่รู้จักในแผง API นี้

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

ลักษณะปัญหา

การเรียก API จากพอร์ทัลนักพัฒนาซอฟต์แวร์ที่ผสานรวมล้มเหลวโดยมี Unknown Error หรือการตอบสนองว่างเปล่าในแผงลองใช้ API นี้

ข้อความแสดงข้อผิดพลาด

คุณอาจเห็นการตอบกลับที่ว่างเปล่าหรือข้อความแสดงข้อผิดพลาดต่อไปนี้สำหรับคำขอ API ในพอร์ทัลที่ผสานรวม

Unknown Error

ในแท็บเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ > คอนโซล คุณจะเห็นข้อผิดพลาดต่อไปนี้ 

Access to XMLHTTPRequest at 'API_URL' from origin 'URL_of_Integrated_DevPortal'
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is
present on the requested resource.

ข้อความแสดงข้อผิดพลาดทั่วไปตามที่เห็นใน เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ > แท็บคอนโซลมีดังนี้

ข้อความแสดงข้อผิดพลาดทั่วไป คลิกเพื่อดูรูปภาพขนาดใหญ่ ข้อความแสดงข้อผิดพลาดทั่วไป

สาเหตุที่เป็นไปได้

สาเหตุ คำอธิบาย วิธีการแก้ปัญหาที่ใช้กับ
ความผิดของนโยบายที่ไม่มีการจัดการ ระบบจะตอบกลับข้อผิดพลาดเริ่มต้นโดยไม่มีส่วนหัว CORS เมื่อนโยบายใดก็ตามทำงานล้มเหลวในขั้นตอนรันไทม์ของคำขอ API ผู้ใช้ Edge Public Cloud
ค่าหลายค่าสำหรับ Access-Control-Allow-Origin ใช้ "เพิ่ม" แทน "กำหนด" ใน Assign Message Policy ผู้ใช้ Edge Public Cloud

สาเหตุ: ความผิดของนโยบายที่ไม่มีการจัดการ

การวินิจฉัย

  1. ตรวจสอบว่าปัญหาเกิดขึ้นเฉพาะในกรณีที่ต้องการการตอบกลับที่ไม่ใช่ 2XX
  2. สำหรับคำขอที่ล้มเหลว ให้ยืนยันว่ามีนโยบายอยู่ในโฟลว์พร็อกซี
  3. ติดตามคำขอและตรวจสอบว่านโยบายที่มี continueOnError="false" ล้มเหลวและเพิ่มข้อผิดพลาดหรือไม่
    1. หากใช่ ให้ยืนยันว่ามีการดำเนินการ นโยบาย AssignMessage CORS ไว้ในขั้นตอนการตอบสนองต่อข้อผิดพลาดหรือไม่
    2. หากไม่ นั่นเป็นสาเหตุของปัญหานี้
      เนื่องจากเมื่อนโยบายที่มีองค์ประกอบ continueOnError="false" ล้มเหลว คำขอจะเข้าสู่ขั้นตอนการตอบกลับข้อผิดพลาด หากไม่มีการจัดการข้อผิดพลาดอย่างชัดแจ้งในขั้นตอนการตอบสนองข้อผิดพลาด ระบบจะส่งการตอบกลับข้อผิดพลาดเริ่มต้นที่เกี่ยวข้องกับนโยบายกลับมา การตอบกลับข้อผิดพลาดนี้ไม่มีส่วนหัว CORS ด้วยเหตุนี้ การเรียก API จากพอร์ทัลนักพัฒนาซอฟต์แวร์ที่ผสานรวมจึงล้มเหลวโดยมี Unknown error

ภาพหน้าจอต่อไปนี้แสดงตัวอย่างข้อความแสดงข้อผิดพลาดและตัวอย่างข้อความแสดงการสำเร็จ

ตัวอย่างข้อความแสดงข้อผิดพลาดในแผงลองใช้ API นี้ของพอร์ทัลที่ผสานรวม และในหน้าต่าง Trace ของพร็อกซี

ตัวอย่างข้อความแสดงข้อผิดพลาด คลิกเพื่อดูรูปภาพขนาดใหญ่ ตัวอย่างข้อความแสดงข้อผิดพลาด

ตัวอย่างข้อความแสดงความสำเร็จในแผงลองใช้ API นี้ของพอร์ทัลที่ผสานรวม และในหน้าต่างติดตามของพร็อกซี

ตัวอย่างข้อความดำเนินการสำเร็จ คลิกเพื่อดูรูปภาพขนาดใหญ่ ตัวอย่างข้อความดำเนินการสำเร็จ

ความละเอียด

  1. คุณต้องใช้ กฎความผิดเพื่อจัดการกับการตอบกลับข้อผิดพลาดแทนการใช้ข้อความแสดงข้อผิดพลาดเริ่มต้น ใส่ นโยบาย AssignMessage CORS ที่มีส่วนหัวที่เหมาะสมและเรียกใช้ใน FaultRule
  2. ในบางครั้ง การกําหนดกฎข้อผิดพลาดสําหรับความผิดแต่ละข้ออาจทำไม่ได้ ดังนั้น ระบบสามารถใช้กฎความผิดเริ่มต้นเพื่อเรียกใช้นโยบาย AssignMessage CORS 
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<ProxyEndpoint name="proxy-endpoint-name">
    <Description/>
    <!-- Add a default fault rule to add CORS -->
    <DefaultFaultRule name="fault-rule">
        <Step>
            <Name>add-cors</Name>
        </Step>
    </DefaultFaultRule>
    <FaultRules/>
    <!--
    <Flows />
    Rest of the proxy definition
    -->
</ProxyEndpoint>

สาเหตุ: มีหลายค่าสำหรับ Access-Control-Allow-Origin

การวินิจฉัย

  1. ตรวจสอบค่าของส่วนหัว Access-Control-Allow-Origin ใน เซสชันการติดตาม
  2. ส่วนหัว Access-Control-Allow-Origin จะตั้งค่าได้เพียงค่าเดียว การตั้งค่ามากกว่า 1 ค่าอาจทำให้เกิดปัญหา CORS และพอร์ทัลนักพัฒนาซอฟต์แวร์จะไม่แสดงการตอบกลับใดๆ
  3. หากค่าของส่วนหัว Access-Control-Allow-Origin ในการติดตาม มีลักษณะดังนี้
    *,*
    หมายความว่าทั้งเซิร์ฟเวอร์เป้าหมายและนโยบาย AssignMessage CORS กำลังตั้งค่า
  4. กรณีนี้อาจเกิดขึ้นเมื่อผู้ใช้ใช้ <Add> element สำหรับ Access-Control-Allow-Origin ในนโยบาย หรือตัวแบ็กเอนด์เองกำลังตั้งค่าหลายค่า

ตัวอย่าง Access-Control-Allow-Origin เท่ากับ *,*

ตัวอย่างการใช้หลายค่า โปรดคลิกเพื่อดูรูปภาพขนาดใหญ่ ตัวอย่างการใช้หลายค่า

ตัวอย่าง Access-Control-Allow-Origin เท่ากับ *

ตัวอย่างการใช้ค่าเดี่ยว โปรดคลิกเพื่อดูรูปภาพขนาดใหญ่ ตัวอย่างการใช้ค่าเดี่ยว

ตัวอย่างการใช้ <Add>:

ตัวอย่างการใช้ &quot;เพิ่ม&quot; คลิกเพื่อดูรูปภาพขนาดใหญ่ ตัวอย่างการใช้ปุ่มเพิ่ม

ตัวอย่างการใช้ <Set>:

ตัวอย่างการใช้ &quot;ตั้งค่า&quot; คลิกเพื่อดูรูปภาพขนาดใหญ่ ตัวอย่างการใช้การตั้งค่า

ความละเอียด

  1. วิธีการที่แนะนำคือการใช้ <Set> element (แทน <Add> element) สำหรับ Access-Control-Allow-Origin เนื่องจากอนุญาตให้ใช้ค่าเดียวเท่านั้น
  2. หรือตั้งค่าส่วนหัว Access-Control-Allow-Origin ในที่เดียวเท่านั้น ไม่ว่าจะเป็น นโยบาย AssignMessage CORS หรือเซิร์ฟเวอร์เป้าหมาย 
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<AssignMessage async="false" continueOnError="false" enabled="true" name="set-cors">
    <DisplayName>Set CORS</DisplayName>
    <FaultRules/>
    <Properties/>
    <Set>
        <Headers>
            <Header name="Access-Control-Allow-Origin">*</Header>
        </Headers>
    </Set>
    <IgnoreUnresolvedVariables>true</IgnoreUnresolvedVariables>
    <AssignTo createNew="false" transport="http" type="response"/>
</AssignMessage>

หากยังต้องการความช่วยเหลือจากทีมสนับสนุนของ Apigee ให้ไปที่หัวข้อต้องรวบรวมข้อมูลการวินิจฉัย

ต้องรวบรวมข้อมูลการวินิจฉัย

รวบรวมข้อมูลการวินิจฉัยต่อไปนี้ จากนั้นติดต่อฝ่ายสนับสนุนของ Apigee Edge

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