Sera ya CORS katika Maombi ya AJAX katika JavaScript

Kupitia AJAX huwezi kufanya tu maombi kwa tovuti nyingine (cross-origin requests). Maombi kama haya yanasimamiwa na sera ya CORS. Kwa ufupi, kulingana na sera hii, tovuti ambayo unaelekeza ombi lako, inapaswa kukubali kuliijibu. Ili kufanya hivyo, inapaswa kutoa vichwa (headers) vinavyofaa vya HTTP.

Wacha tujaribu kwa vitendo. Wacha tuzindue huduma mbili za majaribio kwenye bandari tofauti. Ya kwanza kwenye 3001, na ya pili kwenye 3002. Wacha tujaribu kutuma ombi la AJAX kutoka tovuti ya pili hadi ya kwanza.

Wacha tovuti ya kwanza iwe tayari kupokea maombi yafuatayo:

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

Wacha tutume ombi kutoka tovuti ya pili kuelekea ya kwanza:

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

Hatimaye ombi halitatekelezwa, na kwenye konsole ya kivinjari tutaona kosa, linalohusiana na sera ya CORS.

Ili ombi litekelezwe, huduma ya kwanza inapaswa kutoa vichwa maalum vya HTTP. Wacha tuyaweke - na ombi kutoka tovuti ya pili litaanza kufika kwenye ya kwanza:

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