PricingLoginStart free
jQuery Academy · บทเรียน

AJAX ข้ามโดเมน (CORS/JSONP)

ทำความเข้าใจและประยุกต์ใช้เทคนิคการส่งคำขอ AJAX ข้ามโดเมนโดยใช้ JSONP หรือกำหนดค่าส่วนหัว CORS บนเซิร์ฟเวอร์เพื่อแลกเปลี่ยนข้อมูลอย่างปลอดภัย

บทเรียน 3 จาก 312 ขั้นตอน

AJAX ข้ามโดเมน (CORS/JSONP) เป็นบทเรียน jQuery Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน jQuery Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส jQuery Academy มีบทเรียนทั้งหมด 3 บทเรียน

AJAX ข้ามโดเมน: ความท้าทาย

เมื่อเว็บไซต์ของคุณพยายามดึงข้อมูลจากเว็บไซต์อื่น จะเรียกว่าคำขอ AJAX ข้ามโดเมน ซึ่งมักจัดการได้ค่อนข้างยาก

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

ทำความเข้าใจนโยบายแหล่งกำเนิดเดียวกัน

กฎด้านความปลอดภัยที่กล่าวถึงนี้เรียกว่านโยบายแหล่งกำเนิดเดียวกัน (SOP) ซึ่งเป็นคุณลักษณะด้านความปลอดภัยพื้นฐานของเบราว์เซอร์

SOP กำหนดว่าเบราว์เซอร์จะอนุญาตให้สคริปต์ในหน้าเว็บแรกเข้าถึงข้อมูลในหน้าเว็บที่สองได้ก็ต่อเมื่อหน้าเว็บทั้งสองมีแหล่งกำเนิดเดียวกัน (โดเมน โปรโตคอล และพอร์ต)

  • ตัวอย่าง: หน้าเว็บจาก mywebsite.com ไม่สามารถดึงข้อมูลจาก api.anotherdomain.com ได้โดยตรง

CORS: โซลูชันสมัยใหม่

เพื่ออนุญาตคำขอข้ามโดเมนอย่างปลอดภัย ชุมชนเว็บจึงพัฒนาการแบ่งปันทรัพยากรข้ามแหล่งกำเนิด (CORS) ซึ่งเป็นวิธีมาตรฐานสมัยใหม่สำหรับจัดการเรื่องนี้

CORS ทำงานโดยให้เซิร์ฟเวอร์ระบุอย่างชัดเจนแก่เบราว์เซอร์ว่าโดเมนอื่นใดบ้างที่สามารถเข้าถึงทรัพยากรของเซิร์ฟเวอร์ได้

CORS: การกำหนดค่าฝั่งเซิร์ฟเวอร์

CORS จะกำหนดค่าหลักบนเซิร์ฟเวอร์ที่ให้ข้อมูล เซิร์ฟเวอร์จะส่งส่วนหัว HTTP พิเศษในการตอบกลับ เพื่อระบุว่าแหล่งกำเนิดใดได้รับอนุญาต

ส่วนหัวสำคัญคือ Access-Control-Allow-Origin ซึ่งระบุว่าโดเมนใดสามารถเข้าถึงทรัพยากรได้

  • Access-Control-Allow-Origin: * (อนุญาตทุกโดเมน)
  • Access-Control-Allow-Origin: https://yourdomain.com (อนุญาตเฉพาะโดเมนที่ระบุ)

CORS: คำขอฝั่งไคลเอ็นต์ด้วย jQuery

ในฝั่งไคลเอ็นต์ (โดยใช้ jQuery) การส่งคำขอ CORS มักไม่แตกต่างจากคำขอ AJAX ทั่วไป หากเซิร์ฟเวอร์กำหนดค่าไว้อย่างถูกต้อง

jQuery จัดการการสื่อสารระดับเบราว์เซอร์ให้ คุณเพียงระบุ URL ข้ามโดเมนในคำเรียกใช้ $.ajax()

$.ajax({
  url: "https://api.example.com/data", // Server must allow CORS
  method: "GET",
  success: function(data) {
    console.log("CORS success:", data);
  },
  error: function(jqXHR, textStatus, errorThrown) {
    console.error("CORS Error:", textStatus, errorThrown);
  }
});

CORS: คำขอก่อนตรวจสอบ (OPTIONS)

สำหรับคำขอ CORS บางประเภทที่มีความ "ซับซ้อน" เบราว์เซอร์จะส่งคำขอก่อนตรวจสอบก่อนส่งคำขอจริง ซึ่งเป็นขั้นตอนรักษาความปลอดภัยเพิ่มเติม

คำขอก่อนตรวจสอบใช้เมธอด HTTP OPTIONS เพื่อขออนุญาตจากเซิร์ฟเวอร์ หากเซิร์ฟเวอร์อนุญาต เบราว์เซอร์จึงจะส่งคำขอจริง (เช่น PUT, DELETE หรือคำขอที่มีส่วนหัวกำหนดเอง)

JSONP: ทางเลือกแบบเก่า

ก่อนที่ CORS จะถูกนำมาใช้อย่างแพร่หลาย JSONP (JSON with Padding) เป็นวิธีแก้ปัญหาชั่วคราวที่ใช้กันทั่วไปสำหรับคำขอข้ามโดเมน โดยเฉพาะในเบราว์เซอร์หรือ API รุ่นเก่า

JSONP หลีกเลี่ยงนโยบายแหล่งกำเนิดเดียวกันด้วยการใช้ความสามารถของเบราว์เซอร์ในการโหลดแท็ก <script> จากโดเมนใดก็ได้อย่างสร้างสรรค์

JSONP: กลไกการทำงาน

JSONP ทำงานดังนี้:

  • คุณสร้างแท็ก <script> แบบไดนามิก และกำหนดค่า src เป็น URL ข้ามโดเมน
  • เซิร์ฟเวอร์ซึ่งคาดว่าจะได้รับคำขอ JSONP จะห่อข้อมูล JSON ไว้ในการเรียกใช้ฟังก์ชัน (ส่วนที่เรียกว่า 'padding')
  • เบราว์เซอร์จะทำงานตามสคริปต์นี้ โดยเรียกใช้ฟังก์ชันที่กำหนดไว้ทั่วทั้งหน้าเว็บพร้อมส่งข้อมูลเป็นอาร์กิวเมนต์

JSONP: การใช้งานด้วย jQuery

jQuery ช่วยให้การใช้งาน JSONP ง่ายขึ้นอย่างมาก คุณเพียงระบุ dataType: "jsonp" ในคำเรียกใช้ $.ajax()

jQuery จะจัดการสร้างแท็ก <script> แบบไดนามิก สร้างชื่อฟังก์ชันเรียกกลับที่ไม่ซ้ำกัน และเรียกใช้ฟังก์ชันดังกล่าวเมื่อได้รับการตอบกลับโดยอัตโนมัติ

$.ajax({
  url: "https://api.example.com/jsonp-data?callback=?", // Server must support JSONP
  dataType: "jsonp",
  success: function(data) {
    console.log("JSONP success:", data);
  },
  error: function(jqXHR, textStatus, errorThrown) {
    console.error("JSONP Error:", textStatus, errorThrown);
  }
});

CORS กับ JSONP: ความแตกต่างสำคัญ

แม้ทั้งสองจะใช้แก้ปัญหาการข้ามโดเมน แต่ CORS และ JSONP ก็มีลักษณะแตกต่างกัน:

  • CORS: มาตรฐานสมัยใหม่ ใช้ส่วนหัว HTTP มีความปลอดภัย รองรับเมธอด HTTP ทั้งหมด และต้องกำหนดค่าฝั่งเซิร์ฟเวอร์
  • JSONP: วิธีแก้ปัญหาชั่วคราวแบบเก่า ใช้แท็ก <script> มีความปลอดภัยน้อยกว่า รองรับเฉพาะคำขอ GET เป็นเทคนิคฝั่งไคลเอ็นต์ และต้องให้เซิร์ฟเวอร์ห่อการตอบกลับ

ตรวจสอบอย่างรวดเร็ว: การข้ามโดเมน

ข้อความใดต่อไปนี้เป็น TRUE เกี่ยวกับคำขอ AJAX ข้ามโดเมน

ตอบคำถามในบทเรียนแบบโต้ตอบ

ทบทวน: เชี่ยวชาญ AJAX ข้ามโดเมน

คุณได้เรียนรู้วิธีหลีกเลี่ยงนโยบายแหล่งกำเนิดเดียวกันสำหรับคำขอ AJAX ข้ามโดเมนแล้ว

  • CORS เป็นมาตรฐานสมัยใหม่ที่ปลอดภัย โดยอาศัยส่วนหัว HTTP ฝั่งเซิร์ฟเวอร์เพื่อกำหนดสิทธิ์
  • JSONP เป็นวิธีแก้ปัญหาชั่วคราวแบบเก่าที่ปลอดภัยน้อยกว่า สำหรับคำขอ GET โดยใช้แท็ก <script> แบบไดนามิก

ควรเลือกใช้ CORS whenever possible เนื่องจากมีความปลอดภัยและยืดหยุ่นกว่า ส่วน JSONP เหมาะเป็นหลักสำหรับระบบเก่าหรือสถานการณ์เฉพาะ

เริ่มต้นได้ฟรี

เรียนรู้ JavaScript ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส
22
บทเรียน
48
เริ่มเรียนฟรีดูหลักสูตรเต็ม

คำถามที่พบบ่อย

บทเรียน “AJAX ข้ามโดเมน (CORS/JSONP)” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “AJAX ข้ามโดเมน (CORS/JSONP)” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส jQuery Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส jQuery Academy มีบทเรียนทั้งหมด 3 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “AJAX ข้ามโดเมน (CORS/JSONP)”

ทำความเข้าใจและประยุกต์ใช้เทคนิคการส่งคำขอ AJAX ข้ามโดเมนโดยใช้ JSONP หรือกำหนดค่าส่วนหัว CORS บนเซิร์ฟเวอร์เพื่อแลกเปลี่ยนข้อมูลอย่างปลอดภัย คุณปฏิบัติ jQuery Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน jQuery Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน jQuery Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 3 บทเรียน

บทเรียน “AJAX ข้ามโดเมน (CORS/JSONP)” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน jQuery Academy นี้ได้ไหม

ได้ บทเรียน jQuery Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. การกำหนดค่าคำขอ AJAX อย่างมีประสิทธิภาพ
  2. การจัดการข้อผิดพลาดและความสำเร็จของ AJAX
  3. AJAX ข้ามโดเมน (CORS/JSONP)
← กลับไปที่ jQuery Academy