Polityka CORS w żądaniach AJAX w JavaScript

Przez AJAX nie można po prostu wykonywać żądań do innych stron (cross-origin requests). Takie żądania reguluje polityka CORS. W skrócie, według tej polityki strona, na którą kierujesz żądanie, musi wyrazić na nie zgodę. W tym celu musi zwrócić odpowiednie nagłówki HTTP.

Spróbujmy w praktyce. Uruchommy dwa testowe serwery na różnych portach. Pierwszy na 3001, a drugi na 3002. Spróbujmy wysłać żądanie AJAX z drugiej strony na pierwszą.

Niech pierwsza strona będzie gotowa przyjmować następujące żądania:

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

Wyślemy z drugiej strony żądanie na pierwszą:

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

W rezultacie żądanie nie wykona się, a w konsoli przeglądarki zobaczymy błąd, związany z polityką CORS.

Aby żądanie się wykonało, pierwszy serwer musi zwrócić specjalne nagłówki HTTP. Wskażmy je - i żądanie z drugiej strony zacznie przechodzić na pierwszą:

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