CORS-beleid in AJAX-versoeke in JavaScript

Jy kan nie sommer AJAX-versoeke na ander webwerwe maak nie (cross-origin requests). Sulke versoeke word gereguleer deur die CORS-beleid. Kortom, volgens hierdie beleid moet die webwerf waarna jy 'n versoek rig, instem om daarop te reageer. Om dit te doen, moet dit die toepaslike HTTP-hoofdeur lewer.

Kom ons probeer dit in die praktyk. Laat ons twee toetsbedieners op verskillende poorte begin. Die eerste op 3001, en die tweede op 3002. Kom ons probeer om 'n AJAX-versoek van die tweede werf na die eerste te stuur.

Laat die eerste werf gereed wees om die volgende versoeke te aanvaar:

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

Laat ons 'n versoek vanaf die tweede werf na die eerste stuur:

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

As gevolg hiervan sal die versoek nie uitgevoer word nie, en in die blaaier se konsole sal ons 'n fout sien, verwant aan die CORS-beleid.

Vir die versoek om te slaag, moet die eerste bediener spesiale HTTP-hoofdeur lewer. Kom ons spesifiseer dit - en die versoek vanaf die tweede werf sal na die eerste begin slaag:

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