javascript - tag - Añadir encabezado en solicitud AJAX con jQuery

title html

Question

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 veo con FireBug, veo este encabezado:

OPCIONES xxxx / aaaa HTTP / 1.1
Anfitrión: 127.0.0.1:6666
Usuario-Agente: 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
Aceptar lenguaje: fr, fr-fr; q = 0.8, en-us; q = 0.5, en; q = 0.3
Aceptar-Codificación: gzip, desinflar
Conexión: mantener vivo
Origen: nulo
Método de solicitud de control de acceso: POST
Access-Control-Request-Headers: mi primer encabezado, mi segundo encabezado
Pragma: no-caché
Control de caché: no-caché

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

Access-Control-Request-Headers: mi primer encabezado, mi segundo encabezado

Esperaba valores de encabezado como este:

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

¿Es posible?

Answer 1

Aquí hay un ejemplo de cómo configurar un encabezado de solicitud en una llamada Ajax de JQuery:

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

Answer 2

Este código de abajo funciona para mí. Siempre uso solo comillas simples, y funciona bien. Le sugiero que use solo comillas simples O solo comillas dobles, pero no confunda.

$.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 esto responda a su pregunta...

ACTUALIZACIÓN para Laravel 5.6+:

En la última versión de Laravel (al menos de Laravel 5.6 y superior), NO es X_CSRF_TOKEN sino X-CSRF-TOKEN .

Espero que esto aclare.

Answer 3

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 de dominio cruzado:

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. Entonces 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.

Answer 4

Trate de usar la gema del rack-cors . Y agrega el campo de encabezado en tu llamada ajax.

Answer 5

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

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