Добавьте заголовок в запрос AJAX с помощью jQuery

Я хотел бы добавить пользовательский заголовок в запрос AJAX POST из jQuery.

Я пробовал это:

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

Когда я отправляю этот запрос, и я смотрю с помощью FireBug, я вижу этот заголовок:

ОПЦИИ xxxx/yyyy HTTP/1.1
    Хост: 127.0.0.1:6666
    User-Agent: 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
    Accept-Encoding: gzip, deflate
    Соединение: keep-alive
    Происхождение: null
    Access-Control-Request-Method: POST
     Access-Control-Request-Headers: my-first-header, my-second-header
    Pragma: no-cache
    Cache-Control: no-cache

Почему мои пользовательские заголовки переходят на Access-Control-Request-Headers:

Access-Control-Request-Headers: my-first-header, my-second-header

Я ожидал такие значения заголовка, как это:

My-First-Header: первое значение
   My-Second-Header: второе значение

Возможно ли это?

Ответы

Ответ 1

То, что вы видели в Firefox, не было фактическим запросом; обратите внимание, что HTTP-метод - OPTIONS, а не POST. Фактически это был "предполетный" запрос, который браузер делает, чтобы определить, должен ли разрешаться запрос на междоменный AJAX:

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

Заголовок заголовка Access-Control-Request-Headers в предполетном запросе включает список заголовков в фактическом запросе. Затем ожидается, что сервер сообщит, поддерживаются ли эти заголовки в этом контексте или нет, прежде чем браузер представит фактический запрос.

Ответ 2

Вот пример того, как установить заголовок запроса в JQuery Ajax Call:

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

Ответ 3

Этот код ниже работает для меня. Я всегда использую только одинарные кавычки, и это прекрасно работает. Я предлагаю вам использовать только одинарные кавычки ИЛИ только двойные кавычки, но не путать.

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

Надеюсь, что это ответ на ваш вопрос...

Ответ 4

И именно поэтому вы не можете создать бота с Javascript, потому что ваши возможности ограничены тем, что позволяет вам делать браузер. Вы не можете просто заказать браузер, который следует политике CORS, которой придерживается большинство браузеров, для отправки случайных запросов другим источникам и получения простого ответа!

Кроме того, если вы попытались отредактировать некоторые заголовки запроса вручную, например origin-header из инструментов разработчика, которые поставляются с браузерами, браузер откажется от вашего редактирования и может отправить предварительный запрос OPTIONS.

Ответ 5

Поскольку вы отправляете пользовательские заголовки, поэтому ваш запрос CORS НЕ ПРОСТО ЗАПРОС, поэтому браузер сначала отправляет запрос ОПЦИИ предварительного просмотра, чтобы проверить, что сервер разрешает ваш запрос.

enter image description here

Если вы включите CORS на сервере, то ваш код будет работать. Вы также можете использовать js fetch (здесь)

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>

Ответ 6

Попробуйте использовать rack-cors gem. И добавьте поле заголовка в ваш вызов ajax.