Kebijakan CORS dalam Permintaan AJAX di JavaScript

Melalui AJAX, Anda tidak bisa begitu saja melakukan permintaan ke situs lain (cross-origin requests). Permintaan semacam itu diatur oleh kebijakan CORS. Secara singkat, menurut kebijakan ini, situs yang Anda tuju dengan permintaan harus menyetujui untuk menanggapinya. Untuk itu, situs harus memberikan header HTTP yang sesuai.

Mari kita coba secara praktis. Jalankan dua server tes pada port yang berbeda. Pertama pada 3001, dan kedua pada 3002. Mari kita coba kirim permintaan AJAX dari situs kedua ke situs pertama.

Misalkan situs pertama siap menerima permintaan berikut:

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

Kirim permintaan dari situs kedua ke situs pertama:

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',
		},
	});
});

Akibatnya, permintaan tidak akan dieksekusi, dan di konsol browser kita akan melihat error, terkait dengan kebijakan CORS.

Agar permintaan dieksekusi, server pertama harus memberikan header HTTP khusus. Mari kita tentukan header tersebut - dan permintaan dari situs kedua akan mulai berhasil ke situs pertama:

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