JavaScript ရှိ AJAX တောင်းဆိုချက်များတွင် CORS မူဝါဒ

AJAX မှတစ်ဆင့် အခြားဆိုဒ်များသို့ တောင်းဆိုချက်များ (cross-origin requests) ကို ဤအတိုင်းရိုးရိုးလေးမလုပ်နိုင်ပါ။ ထိုသို့သော တောင်းဆိုချက်များကို CORS မူဝါဒဖြင့် စည်းမျဉ်းစည်းကမ်းချမှတ်ထားသည်။ အတိုချုပ်ဆိုရသော်၊ ဤမူဝါဒအရ သင်တောင်းဆိုချက်ပို့လွှတ်သည့် ဆိုဒ်သည် ထိုတောင်းဆိုချက်ကို ပြန်ကြားဖြေကြားရန် သဘောတူညီချက်ပေးရမည်။ ထိုသို့ပြုလုပ်ရန် ၎င်းသည် သက်ဆိုင်ရာ HTTP ခေါင်းစီးများကို ပြန်ပေးပို့ရမည်။

လက်တွေ့လုပ်ဆောင်ကြည့်ရအောင်။ < a href="/my/javascript/book/supreme/test-server/multi-launching/">test server နှစ်ခုကို မတူညီသော port များပေါ်တွင် စတင်လိုက်ပါ။ ပထမဆုံးကို 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 မူဝါဒနှင့်ဆက်စပ်သော အမှားတစ်ခုကို မြင်တွေ့ရမည်။

တောင်းဆိုချက်အလုပ်လုပ်နိုင်ရန်၊ ပထမ server သည် အထူး HTTP ခေါင်းစီးများကို ပြန်ပေးပို့ရမည်။ ထိုခေါင်းစီးများကို သတ်မှတ်ပေးလိုက်ကြပါစို့ - ထိုအခါ ဒုတိယ ဆိုဒ်မှ တောင်းဆိုချက်သည် ပထမဆိုဒ်သို့ စတင်ရောက်ရှိလာမည်။

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