Polisi CORS dalam Permintaan AJAX dalam JavaScript

Melalui AJAX, anda tidak boleh begitu sahaja membuat permintaan ke laman web lain (cross-origin requests). Permintaan sedemikian dikawal selia oleh polisi CORS. Secara ringkas, menurut polisi ini, laman web yang anda tujukan permintaan perlu bersetuju untuk membalasnya. Untuk itu, ia perlu menghantar tindak balas HTTP yang sesuai.

Mari kita cuba secara praktikal. Jalankan dua pelayan ujian pada port yang berbeza. Yang pertama pada 3001, dan yang kedua pada 3002. Mari cuba hantar permintaan AJAX dari laman web kedua ke laman web pertama.

Katakan laman web pertama bersedia untuk menerima permintaan berikut:

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

Hantar permintaan dari laman web kedua ke laman web 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 dilaksanakan, dan dalam konsol pelayar web kita akan melihat ralat, berkaitan dengan polisi CORS.

Untuk permintaan dilaksanakan, pelayan pertama perlu menghantar pengepala HTTP khas. Mari kita nyatakannya - dan permintaan dari laman web kedua akan mula berjaya sampai ke laman web pertama:

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