การเรียก API ของ React.js ไปยัง AWS Lambda, เกตเวย์ API และการจัดการกับ CORS

ลองใช้เครื่องมือของเราเพื่อกำจัดปัญหา

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

ระบบหยุดชั่วคราวใน c

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

หากคุณไม่คุ้นเคยกับ CORS นี่คือคำจำกัดความจาก มอซิลล่า :



|_+_|

โดยพื้นฐานแล้วหมายความว่า ออกจากกล่อง FQDN ที่โฮสต์ API จะบล็อกคำขอไปยัง API ที่ไม่ได้มาจาก FQDN เดียวกัน ดังนั้นหากแอปของคุณกำลังส่งคำขอจาก โดเมน-a.com ไปยัง API ที่ให้บริการจาก โดเมน-a.com มันจะทำงาน. หากแอปของคุณกำลังส่งคำขอจาก โดเมน-a.com ไปยัง API ที่ให้บริการจาก โดเมน-b.com มันจะล้มเหลวเนื่องจาก CORS และนี่จะเป็นกรณีที่คุณจะมีกับ AWS API Gateway คำขอจากแอปของคุณจะไม่อยู่ในโดเมนเดียวกับที่ให้บริการเกตเวย์ API ตอนนี้คุณอาจคิดว่านี่เป็นเรื่องง่ายที่จะแก้ไข แต่มันไม่ใช่ และมีเอกสารน้อยมากเกี่ยวกับวิธีการทำงานนี้ ฉันคิดออกแล้วและต้องการแบ่งปันกับคุณ

ขั้นตอนแรกคือการเข้าสู่ระบบ คอนโซล Amazon AWS และค้นหา แลมบ์ดา ภายใต้ ค้นหาบริการ .

คลิกที่ปุ่มสร้างฟังก์ชั่นสีส้ม

รูปภาพสำหรับโพสต์

สำหรับจุดประสงค์ของบทช่วยสอนนี้ คุณจะต้องเลือกค่าเริ่มต้น ผู้เขียนตั้งแต่เริ่มต้น , ตั้งชื่อฟังก์ชั่นของคุณ (ในกรณีนี้ สื่อการสอน ให้เลือกรันไทม์ (ในกรณีนี้ Node.js 12.x ) และสำหรับบทบาทการดำเนินการ ตรวจสอบให้แน่ใจว่าคุณได้เลือก สร้างกฎใหม่ที่มีสิทธิ์แลมบ์ดาพื้นฐาน . หากนี่ไม่ใช่ฟังก์ชัน Lambda แรกของคุณ คุณอาจต้องการใช้ ใช้บทบาทที่มีอยู่ .

รูปภาพสำหรับโพสต์

จะใช้เวลาสักครู่ในการสร้างฟังก์ชั่น แต่เมื่อเสร็จแล้วคุณจะอยู่ใน การกำหนดค่า หน้าจอ. มีตัวเลือกที่มีประโยชน์มากมาย แต่เพื่อจุดประสงค์ของบทช่วยสอน ฉันต้องการทำให้สิ่งนี้ง่ายที่สุดเท่าที่จะทำได้ กรุณาเลื่อนลงไปที่ รหัสฟังก์ชั่น ส่วนเพื่อค้นหาค่าเริ่มต้น สวัสดีจากแลมบ์ดา! รหัส.

รูปภาพสำหรับโพสต์

codeburst.io

การเรียก API ของ React.js ไปยัง AWS Lambda, เกตเวย์ API และการจัดการกับ CORS

บทช่วยสอนนี้จะแสดงวิธีแก้ไขปัญหา CORS ที่น่าหงุดหงิดด้วย AWS Lambda และ API Gateway จากเบราว์เซอร์>

ดูสิ่งนี้ด้วย: