Encabezados de solicitud de control de acceso, se agrega al encabezado en la solicitud AJAX con jQuery

Me gustaría agregar un encabezado personalizado a una solicitud POST AJAX de jQuery.

He intentado esto:

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

Cuando envío esta solicitud y miro con FireBug, veo este encabezado:

OPCIONES xxxx / aaaa HTTP / 1.1
Host: 127.0.0.1:6666
User-Agent: Mozilla / 5.0 (Windows NT 6.1; WOW64; rv: 11.0) Gecko / 20100101 Firefox / 11.0
Aceptar: text / html, application / xhtml + xml, application / xml; q = 0.9, / ; q = 0.8
Idioma de aceptación: fr, fr-fr; q = 0.8, en-us; q = 0.5, en; q = 0.3
Codificación de aceptación: gzip, desinflar
Conexión: mantener -alive
Origen: nulo
Access-Control-Request-Method: POST
Access-Control-Request-Headers: my-first-header, my-second-header
Pragma: no-cache
Cache-Control: no-cache

¿Por qué mis encabezados personalizados van a Access-Control-Request-Headers:

Acceso-Control-Solicitud-Encabezados: mi-primer-encabezado, mi-segundo-encabezado

Esperaba unos valores de encabezado como este:

Mi primer encabezado: primer valor
Mi segundo encabezado: segundo valor

¿Es posible?

Lo que viste en Firefox no fue la solicitud real; tenga en cuenta que el método HTTP es OPCIONES, no POST. En realidad, fue la solicitud 'previa al vuelo' que realiza el navegador para determinar si se debe permitir una solicitud AJAX entre dominios:

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

El encabezado Access-Control-Request-Headers en la solicitud previa al vuelo incluye la lista de encabezados en la solicitud real. Luego se espera que el servidor informe si estos encabezados son compatibles en este contexto o no, antes de que el navegador envíe la solicitud real.

Aquí hay un ejemplo de cómo configurar un encabezado de solicitud en una llamada 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 a continuación funciona para mí. Siempre uso solo comillas simples, y funciona bien. Le sugiero que use solo comillas simples o comillas dobles, pero no mezcle.

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

Debido a que envía encabezados personalizados, por lo que su solicitud CORS no es una solicitud simple , por lo que el navegador primero envía una solicitud OPTIONS de verificación previa para verificar que el servidor permita su solicitud.

Si activa CORS en el servidor, su código funcionará. También puedes usar JavaScript fetch en su lugar ( aquí )

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>

Aquí hay una configuración de ejemplo que se enciende CORS en nginx (archivo 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;
    }
}

Aquí hay una configuración de ejemplo que se enciende CORS en Apache (archivo .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"

Y es por eso que no puedes crear un bot con JavaScript, porque tus opciones están limitadas a lo que el navegador te permite hacer. No puede simplemente ordenar un navegador que siga el CORS política , que la mayoría de los navegadores siguen, para enviar solicitudes aleatorias a otros orígenes y permitirle obtener la respuesta de manera simple!

Además, si trató de editar algunos encabezados de solicitud manualmente, como origin-headerlas herramientas de desarrolladores que vienen con los navegadores, el navegador rechazará su edición y puede enviar una OPTIONSsolicitud de verificación previa.

Intenta usar la gema de corsé de estante . Y agregue el campo de encabezado en su llamada Ajax.