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

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

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

Որպեսզի հարցումը կատարվի, առաջին սերվերը պետք է տրամադրի հատուկ 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';
  }
}