JavaScript-da AJAX so'rovlarida CORS siyosati

AJAX orqali boshqa saytlarga so'rov yuborish (cross-origin requests) oddiygina amalga oshirilmaydi. Bunday so'rovlar CORS siyosati bilan tartibga solinadi. Qisqasi, ushbu siyosatga ko'ra, siz so'rov yuborayotgan sayt unga javob berishga rozilik bildirishi kerak. Buning uchun u mos HTTP sarlavhalarini qaytarishi kerak.

Keling, amalda sinab ko'raylik. Ikkita test serverini turli portlarda ishga tushiramiz. Birinchisi 3001-portda, ikkinchisi esa 3002-portda. Keling, ikkinchi saytdan birinchisiga AJAX so'rov yuborishga harakat qilaylik.

Birinchi sayt quyidagi so'rovlarni qabul qilishga tayyor bo'lsin:

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

Keling, ikkinchi saytdan birinchi saytga so'rov yuboraylik:

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

Natijada so'rov bajarilmaydi, brauzer konsolida esa CORS siyosati bilan bog'liq xatolikni ko'ramiz.

So'rov bajarilishi uchun birinchi server maxsus HTTP sarlavhalarini qaytarishi kerak. Keling ularni ko'rsatamiz - va ikkinchi saytdan birinchi saytga so'rov o'ta boshlaydi:

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