นโยบาย CORS ในคำขอ AJAX ใน JavaScript

คุณไม่สามารถทำคำขอไปยังเว็บไซต์อื่นได้ง่ายๆ ผ่าน AJAX (cross-origin requests) คำขอดังกล่าวถูกควบคุมโดยนโยบาย CORS โดยย่อยแล้ว ตามนโยบายนี้ เว็บไซต์ที่คุณส่งคำขอไป ต้องยินยอมที่จะตอบกลับคำขอนั้น เพื่อการนี้ มันต้องส่งกลับ HTTP headers ที่เหมาะสม

มาลองทดสอบกันในทางปฏิบัติ ให้เราเริ่มต้น สอง เซิร์ฟเวอร์ทดสอบบนพอร์ตที่ต่างกัน เซิร์ฟเวอร์แรกบน 3001 และเซิร์ฟเวอร์ที่สองบน 3002 มาลองส่งคำขอ AJAX จากเว็บไซต์ที่สองไปยังเว็บไซต์แรก

ให้เว็บไซต์แรกพร้อมที่จะรับ คำขอต่อไปนี้:

test-http-server1/server.jsexport default {
  '/handler/': function({ body }) {
    console.log(body);
    return 'success';
  }
}

ส่งคำขอจากเว็บไซต์ที่สอง ไปยังเว็บไซต์แรก:

test-http-server2/public/client.jsbutton.addEventListener('click', function() {
  let promise = fetch('http://localhost:3001/handler/', {
    method: 'post',
    body: JSON.stringify([1, 2, 3, 4, 5]),
    headers: {
      'Content-Type': 'application/json',
    },
  });
});

ผลลัพธ์คือคำขอจะไม่ถูกดำเนินการ และในคอนโซลเบราว์เซอร์เราจะเห็นข้อผิดพลาด ที่เกี่ยวข้องกับนโยบาย CORS

เพื่อให้คำขอถูกดำเนินการ เซิร์ฟเวอร์แรก ต้องส่งกลับ HTTP headers พิเศษ มากำหนดพวกมัน - และคำขอจากเว็บไซต์ที่สอง ก็จะเริ่มสามารถไปถึงเว็บไซต์แรกได้:

test-http-server1/server.jsexport default {
  '/handler/': function({ body, resp }) {
    resp.setHeader('Access-Control-Allow-Origin', '*');
    resp.setHeader('Access-Control-Allow-Headers', '*');
    
    console.log(body);
    return 'success';
  }
}