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

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

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

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

export default {
	'/handler/': function({ body }) {
		console.log(body);
		return 'success';
	}
}

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

button.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 พิเศษ มากำหนดพวกมัน - และคำขอจากเว็บไซต์ที่สอง ก็จะเริ่มสามารถไปถึงเว็บไซต์แรกได้:

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