Politica CORS nelle richieste AJAX in JavaScript

Con AJAX non è possibile effettuare semplicemente richieste ad altri siti (cross-origin requests). Tali richieste sono regolate dalla politica CORS. In breve, secondo questa politica, il sito a cui si indirizza la richiesta deve acconsentire a rispondere. Per fare ciò, deve restituire le opportune intestazioni HTTP.

Proviamo nella pratica. Avviamo due server di test su porte diverse. Il primo sulla 3001, e il secondo sulla 3002. Proviamo a inviare una richiesta AJAX dal secondo sito al primo.

Supponiamo che il primo sito sia pronto a ricevere le seguenti richieste:

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

Inviiamo dal secondo sito una richiesta al primo:

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

Di conseguenza, la richiesta non verrà eseguita, e nella console del browser vedremo un errore legato alla politica CORS.

Affinché la richiesta venga eseguita, il primo server deve restituire speciali intestazioni HTTP. Specifichiamole - e la richiesta dal secondo sito inizierà a raggiungere il primo:

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