Politika CORS v AJAX požadavcích v JavaScriptu

Přes AJAX nelze jednoduše provádět požadavky na jiné weby (cross-origin requests). Takové požadavky jsou regulovány politikou CORS. Stručně řečeno, podle této politiky musí web, na který posíláte požadavek, souhlasit s jeho obsloužením. K tomu musí vrátit odpovídající HTTP hlavičky.

Pojďme to vyzkoušet v praxi. Spustíme dva testovací servery na různých portech. První na 3001, a druhý na 3002. Zkusme odeslat AJAX požadavek z druhého webu na první.

Nechť první web je připraven přijímat následující požadavky:

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

Pošleme z druhého webu požadavek na první:

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 se požadavek neprovede a v konzoli prohlížeče uvidíme chybu související s politikou CORS.

Aby se požadavek provedl, první server musí poskytnout speciální HTTP hlavičky. Pojďme je nastavit - a požadavek z druhého webu začne procházet na první:

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