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 တောင်းဆိုချက်တစ်ခု ပို့လွှတ်ကြည့်ရအောင်။

ပထမဆိုဒ်သည် အောက်ပါတောင်းဆိုချက်များကို လက်ခံရန် အသင့်ရှိသည်ဆိုပါစို့။

test-http-server1/server.jsexport default {
  '/handler/': function({ body }) {
    console.log(body);
    return 'success';
  }
}

ဒုတိယဆိုဒ်မှ ပထမဆိုဒ်သို့ တောင်းဆိုချက်တစ်ခု ပို့လွှတ်လိုက်ပါ။

test-http-server2/public/client.jsbutton.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 ခေါင်းစီးများကို ပြန်ပေးပို့ရမည်။ ထိုခေါင်းစီးများကို သတ်မှတ်ပေးလိုက်ကြပါစို့ - ထိုအခါ ဒုတိယ ဆိုဒ်မှ တောင်းဆိုချက်သည် ပထမဆိုဒ်သို့ စတင်ရောက်ရှိလာမည်။

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