Заголовки запроса контроля доступа, добавляются в заголовок в 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
Пользователь-агент: Mozilla / 5.0 (Windows NT 6.1; WOW64; rv: 11.0) Gecko / 20100101 Firefox / 11.0
Принимать: текст / 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
Соединение: сохранить -alive Источник
: null
Access-Control-Request-Method: POST
Access-Control-Request-Headers: my-first-header, my-second-header
Pragma: без кэширования
Cache-Control: без кэширования

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

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

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

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

Является ли это возможным?

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

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

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

Вот пример того, как установить заголовок запроса в вызове 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));
  }
});

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

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

Поскольку вы отправляете пользовательские заголовки, чтобы ваш запрос CORS не был простым запросом , браузер сначала отправляет предварительный запрос OPTIONS, чтобы убедиться, что сервер разрешает ваш запрос.

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

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>

Вот пример конфигурации, которая включает CORS для nginx (файл 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;
    }
}

Вот пример конфигурации, которая включает CORS на Apache (файл .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"

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

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

Попробуйте использовать стойку-Корс камень. И добавьте поле заголовка в ваш вызов Ajax.