Politika CORS v AJAX zahtevah v JavaScriptu

Z AJAX-om ni mogoče preprosto pošiljati zahtev na druge spletne strani (cross-origin requests). Takšne zahteve ureja politika CORS. Na kratko, po tej politiki se mora spletna stran, na ktéro pošiljate zahtevo, strinjati z njenim obdelovanjem. Za to mora vrniti ustrezne HTTP glave.

Poskusimo v praksi. Zaženimo dva testna strežnika na različnih vratih. Prvega na 3001, drugega pa na 3002. Poskusimo poslati AJAX zahtevo z druge spletne strani na prvo.

Naj prva spletna stran sprejema naslednje zahteve:

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

Pošljimo z druge spletne strani zahtevo na prvo:

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

Kot rezultat se zahteva ne bo izvedla, v brskalnikovi konoli pa bomo videli napako, povezano s politiko CORS.

Da se zahteva izvede, mora prvi strežnik vrniti posebne HTTP glave. Določimo jih - in zahteva z druge spletne strani bo začela delovati na prvi:

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