Política CORS em requisições AJAX em JavaScript

Via AJAX, não é possível simplesmente fazer requisições para outros sites (cross-origin requests). Tais requisições são reguladas pela política CORS. Resumidamente, por esta política, o site para o qual você direciona a requisição deve concordar em respondê-la. Para isso, ele deve retornar os cabeçalhos HTTP apropriados.

Vamos testar na prática. Vamos executar dois servidores de teste em portas diferentes. O primeiro na 3001, e o segundo na 3002. Vamos tentar enviar uma requisição AJAX do segundo site para o primeiro.

Suponha que o primeiro site esteja pronto para receber as seguintes requisições:

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

Vamos enviar do segundo site uma requisição para o primeiro:

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

Como resultado, a requisição não será executada, e no console do navegador veremos um erro relacionado à política CORS.

Para que a requisição seja executada, o primeiro servidor deve retornar cabeçalhos HTTP especiais. Vamos especificá-los - e a requisição do segundo site começará a passar para o primeiro:

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