Access Control Request Headers, é adicionado ao cabeçalho na solicitação AJAX com jQuery

Gostaria de adicionar um cabeçalho personalizado a uma solicitação AJAX POST do jQuery.

Eu tentei isso:

$.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 esta solicitação e assisto ao FireBug, vejo este cabeçalho:

OPÇÕES xxxx / aaaa
Host HTTP / 1.1 : 127.0.0.1:6666
Agente do usuário: 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, pt-br; q = 0,5, pt; q = 0,3
Accept-Encoding: gzip, deflate
Conexão: mantenha -alive
Origem: null
Método de solicitação de controle de
acesso : POST Controle de acesso-solicitação-cabeçalhos: meu-primeiro-cabeçalho, meu-segundo-cabeçalho
Pragma: sem cache
Controle de cache: sem cache

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

Cabeçalhos de solicitação de controle de acesso: meu primeiro cabeçalho, meu segundo cabeçalho

Eu estava esperando um valor de cabeçalho como este:

Meu primeiro cabeçalho: primeiro valor
Meu segundo cabeçalho: segundo valor

É possível?

O que você viu no Firefox não foi a solicitação real; observe que o método HTTP é OPTIONS, não POST. Na verdade, foi a solicitação 'pré-vôo' que o navegador faz para determinar se uma solicitação AJAX entre domínios deve ser permitida:

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

O cabeçalho de controle de acesso-solicitação-cabeçalho na solicitação de pré-voo inclui a lista de cabeçalhos na solicitação real. Espera-se que o servidor informe novamente se esses cabeçalhos são suportados neste contexto ou não, antes que o navegador envie a solicitação real.

Aqui está um exemplo de como definir um cabeçalho de solicitação em uma chamada do 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));
  }
});

Este código abaixo funciona para mim. Eu sempre uso apenas aspas simples e funciona bem. Sugiro que você use apenas aspas simples ou duplas, mas não misturadas.

$.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);
    }
  });

Como você envia cabeçalhos personalizados para que sua solicitação CORS não seja uma solicitação simples , o navegador envia primeiro uma solicitação OPTIONS de comprovação para verificar se o servidor permite sua solicitação.

Se você ativar o CORS no servidor, seu código funcionará. Você também pode usar a busca por JavaScript ( aqui )

let url='https://server.test-cors.org/server?enable=true&status=200&methods=POST&headers=My-First-Header,My-Second-Header';


$.ajax({
    type: 'POST',
    url: url,
    headers: {
        "My-First-Header":"first value",
        "My-Second-Header":"second value"
    }
}).done(function(data) {
    alert(data[0].request.httpMethod + ' was send - open chrome console> network to see it');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Aqui está um exemplo de configuração que ativa o CORS no nginx (arquivo nginx.conf):

location ~ ^/index\.php(/|$) {
   ...
    add_header 'Access-Control-Allow-Origin' "$http_origin" always;
    add_header 'Access-Control-Allow-Credentials' 'true' always;
    if ($request_method = OPTIONS) {
        add_header 'Access-Control-Allow-Origin' "$http_origin"; # DO NOT remove THIS LINES (doubled with outside 'if' above)
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Max-Age' 1728000; # cache preflight value for 20 days
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'My-First-Header,My-Second-Header,Authorization,Content-Type,Accept,Origin';
        add_header 'Content-Length' 0;
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        return 204;
    }
}

Aqui está um exemplo de configuração que ativa o CORS no Apache (arquivo .htaccess)

# ------------------------------------------------------------------------------
# | Cross-domain Ajax requests                                                 |
# ------------------------------------------------------------------------------

# Enable cross-origin Ajax requests.
# http://code.google.com/p/html5security/wiki/CrossOriginRequestSecurity
# http://enable-cors.org/

# <IfModule mod_headers.c>
#    Header set Access-Control-Allow-Origin "*"
# </IfModule>

#Header set Access-Control-Allow-Origin "http://example.com:3000"
#Header always set Access-Control-Allow-Credentials "true"

Header set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header always set Access-Control-Allow-Headers "My-First-Header,My-Second-Header,Authorization, content-type, csrf-token"

E é por isso que você não pode criar um bot com JavaScript, porque suas opções são limitadas ao que o navegador permite. Você não pode simplesmente solicitar um navegador que siga a política do CORS , seguida pela maioria dos navegadores, para enviar solicitações aleatórias para outras origens e permitir que você obtenha a resposta com simplicidade!

Além disso, se você tentou editar alguns cabeçalhos de solicitação manualmente, como origin-headernas ferramentas de desenvolvedores que acompanham os navegadores, o navegador recusará sua edição e poderá enviar uma OPTIONSsolicitação de comprovação .

Tente usar a gema rack-cors . E adicione o campo de cabeçalho na sua chamada Ajax.