Cabeçalhos personalizados em solicitações AJAX POST com jQuery

Em solicitações AJAX POST iniciadas com jQuery, é possível incluir cabeçalhos personalizados. No entanto, o mecanismo para adicionar cabeçalhos difere da abordagem típica.

Quando você especifica cabeçalhos conforme mostrado no exemplo:

$.ajax({
    type: 'POST',
    url: url,
    headers: {
        "My-First-Header":"first value",
        "My-Second-Header":"second value"
    }
}).done(function(data) {
    alert(data);
});

Compreensivelmente, você esperaria que os cabeçalhos fossem enviados como:

My-First-Header: first value
My-Second-Header: second value

No entanto, as medidas de segurança do navegador impedem o envio dos valores do cabeçalho personalizado diretamente na solicitação inicial. Em vez disso, eles são colocados no cabeçalho Access-Control-Request-Headers. Este é um mecanismo de segurança conhecido como solicitação pré-voada.

Para permitir que a solicitação subsequente inclua os valores reais do cabeçalho, o servidor deve configurar os cabeçalhos CORS (Cross-Origin Resource Sharing) necessários.

Uma solução para isso é enviar os cabeçalhos de uma maneira diferente, conforme mostrado no código de exemplo fornecido:

$.ajax({
  type: "POST",
  beforeSend: function(request) {
    request.setRequestHeader("Authority", authorizationToken);
  },
  url: "entities",
  data: "json="   escape(JSON.stringify(createRequestObject)),
  processData: false,
  success: function(msg) {
    $("#results").append("The result ="   StringifyPretty(msg));
  }
});

Na verdade, essa abordagem define os valores do cabeçalho da solicitação diretamente, ignorando o posicionamento Access-Control-Request-Headers. Ele fornece uma maneira de enviar cabeçalhos personalizados com a solicitação inicial sem exigir configuração do servidor.