Adicionar cabeçalho no pedido AJAX com o jQuery

gostaria de adicionar um cabeçalho personalizado a um pedido AJAX POST de jQuery.

já tentei isto:

$.ajax({
    type: 'POST',
    url: url,
    headers: {
        "My-First-Header":"first value",
        "My-Second-Header":"second value"
    }
    //OR
    //beforeSend: function(xhr) { 
    //  xhr.setRequestHeader("My-First-Header", "first value"); 
    //  xhr.setRequestHeader("My-Second-Header", "second value"); 
    //}
}).done(function(data) { 
    alert(data);
});
Quando envio este pedido e vejo com FireBug, vejo este cabeçalho:

opções xxxx/yyyy HTTP / 1, 1
Máquina:127. 0. 0. 1: 6666
Agente do utilizador: Mozilla / 5.0 (Windows NT 6.1; WOW64; rv: 11.0) Gecko / 20100101 Firefox / 11.0
Accept: text / html,application/xhtml+xml, application/xml;q=0.9,/;q = 0, 8
Accept-Language: fr, fr-fr; q = 0.8, en-us; q = 0.5, en; q=0.3
Codificação de aceitação: gzip, deflate
Ligação: manter-se vivo
Origem: null
Access-Control-Request-Method: POST
Access-Control-Request-Headers: my-first-header, my-second-header
Pragma: no-cache
Cache-Control: no-cache

Porque é que os meus cabeçalhos personalizados vão para Access-Control-Request-Headers:

Access-Control-Request-Headers: o meu-primeiro-cabeçalho, o meu-segundo-cabeçalho

estava à espera de um cabeçalho como este:

O Meu Primeiro cabeçalho: primeiro valor
O meu-segundo-cabeçalho: segundo valor

É possível?

Author: wonea, 2012-04-10

5 answers

O que você viu no Firefox não foi o pedido real; note que o método HTTP é opções, não POST. Foi na verdade o pedido de "pré-voo" que o navegador faz para determinar se um pedido AJAX cross-domain deve ser permitido:

Http://www.w3.org/TR/cors/

O cabeçalho Access-Control-Request-Headers no pedido de pré-voo inclui a lista de cabeçalhos no pedido actual. Espera-se então que o servidor relate se estes cabeçalhos são suportado neste contexto ou não, antes de o navegador enviar o pedido real.

 106
Author: karlgold, 2012-09-10 03:44:33

Aqui está um exemplo de como definir um cabeçalho de pedido em uma chamada jQuery Ajax:

$.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));
  }
});
 362
Author: milkovsky, 2016-12-27 12:28:08
Este código abaixo funciona para mim. Eu uso sempre apenas suportes individuais, e funciona bem. Sugiro que use apenas parênteses simples ou apenas parêntesis duplos, mas não misturados.
$.ajax({
    url: 'YourRestEndPoint',
    headers: {
        'Authorization':'Basic xxxxxxxxxxxxx',
        'X_CSRF_TOKEN':'xxxxxxxxxxxxxxxxxxxx',
        'Content-Type':'application/json'
    },
    method: 'POST',
    dataType: 'json',
    data: YourData,
    success: function(data){
      console.log('succes: '+data);
    }
  });
Espero que isto responda à tua pergunta...
 101
Author: G-raph, 2014-11-14 12:45:18

E é por isso que não pode criar um bot com Javascript, porque as suas opções estão limitadas ao que o navegador lhe permite fazer. Você não pode simplesmente pedir um navegador que segue a Política CORS, que a maioria dos navegadores seguem, para enviar pedidos aleatórios para outras origens e permitir que você obtenha a resposta que simplesmente!

Adicionalmente, se tentou editar manualmente alguns cabeçalhos de pedidos como origin-header das ferramentas de desenvolvimento que vêm com os navegadores, o navegador irá recusar a sua edição, e pode enviar um pedido de pré-voo OPTIONS.

 1
Author: the accountant, 2018-02-25 14:42:00

Tente usarrack-cors gem. E adicione o campo de cabeçalho na sua chamada ajax.

 -8
Author: Jie Sun, 2016-07-07 06:29:44