CORS-politikk i AJAX-forespørsler i JavaScript

Via AJAX kan du ikke bare gjøre forespørsler til andre nettsteder (cross-origin requests). Slike forespørsler reguleres av politikken CORS. Kort fortalt, i henhold til denne politikken må nettstedet som du retter en forespørsel til, samtykke i å svare på den. For å gjøre dette må det levere de tilsvarende HTTP-headerne.

La oss prøve i praksis. La oss starte to testservere på forskjellige porter. Den første på 3001, og den andre på 3002. La oss prøve å sende en AJAX-forespørsel fra det andre nettstedet til det første.

La det første nettstedet være klart til å motta følgende forespørsler:

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

La oss sende en forespørsel fra det andre nettstedet til det første:

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

Som et resultat vil ikke forespørselen bli utført, og i nettleserens konsoll vil vi se en feil, relatert til CORS-politikken.

For at forespørselen skal bli utført, må den første serveren levere spesielle HTTP-headere. La oss spesifisere dem - og forespørselen fra det andre nettstedet vil begynne å gå til det første:

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