CORS-käytäntö AJAX-pyynnöissä JavaScriptissä

AJAXilla ei voi yksinkertaisesti tehdä pyyntöjä muille sivustoille (cross-origin requests). Tällaisia pyyntöjä säätelee CORS-käytäntö. Lyhyesti sanottuna tämän käytännön mukaan sivusto, johon suuntaat pyynnön, täytyy suostua vastaamaan siihen. Tätä varten sen on palautettava vastaavat HTTP-otsikot.

Kokeillaan käytännössä. Käynnistetään kaksi testipalvelinta eri porteille. Ensimmäinen porttiin 3001 ja toinen porttiin 3002. Yritetään lähettää AJAX-pyyntö toiselta sivustolta ensimmäiselle.

Olkoon ensimmäinen sivusto valmis vastaanottamaan seuraavat pyynnöt:

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

Lähetetään toiselta sivustolta pyyntö ensimmäiselle:

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

Tuloksena pyyntöä ei suoriteta, ja selaimen konsolissa näemme virheen, joka liittyy CORS-käytäntöön.

Jotta pyyntö suoritettaisiin, ensimmäisen palvelimen täytyy palauttaa erityiset HTTP-otsikot. Määritellään ne - ja pyyntö toiselta sivustolta alkaa mennä läpi ensimmäiselle:

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