Politika CORS v AJAX požiadavkách v JavaScripte

Prostredníctvom AJAX nie je možné jednoducho vykonávať požiadavky na iné stránky (cross-origin requests). Takéto požiadavky sú regulované politikou CORS. Stručne povedané, podľa tejto politiky stránka, na ktorú posielate požiadavku, musí súhlasiť s jej vykonaním. Preto musí vrátiť príslušné HTTP hlavičky.

Vyskúšajme si to v praxi. Spustíme dva testovacie servery na rôznych portoch. Prvý na 3001 a druhý na 3002. Skúsme odoslať AJAX požiadavku z druhej stránky na prvú.

Nech prvá stránka je pripravená prijímať nasledujúce požiadavky:

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

Pošleme z druhej stránky požiadavku na prvú:

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

V dôsledku toho sa požiadavka nevykoná a v konzole prehliadača uvidíme chybu spojenú s politikou CORS.

Aby sa požiadavka vykonala, prvý server musí vrátiť špeciálne HTTP hlavičky. Zadajme ich - a požiadavka z druhej stránky začne prechádzať na prvú:

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