CORS-ի քաղաքականությունը AJAX հարցումներում JavaScript-ում

Չի կարելի ուղղակիորեն AJAX-ի միջոցով հարցումներ կատարել այլ կայքերին (cross-origin requests): Նման հարցումները կարգավորվում են CORS քաղաքականությամբ: Հակիրճ ասած, այս քաղաքականության համաձայն՝ այն կայքը, որին դուք ուղղում եք հարցումը, պետք է համաձայնի դրան պատասխանել: Դրա համար այն պետք է տրամադրի համապատասխան HTTP վերնագրեր:

Եկեք փորձենք գործնականում: Գործարկենք երկու փորձնական սերվեր տարբեր պորտերում: Առաջինը 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 վերնագրեր: Եկեք նշենք դրանք, և երկրորդ կայքից հարցումը կսկսի անցնել առաջինին.

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