Nagłówki żądania kontroli dostępu są dodawane do nagłówka w żądaniu AJAX za pomocą jQuery

Chciałbym dodać niestandardowy nagłówek do żądania AJAX POST z jQuery.

Próbowałem tego:

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

Kiedy wysyłam to żądanie i oglądam w FireBug, widzę ten nagłówek:

OPCJE xxxx / rrrr
Host HTTP / 1.1 : 127.0.0.1:6666
Użytkownik-Agent: Mozilla / 5.0 (Windows NT 6.1; WOW64; rv: 11.0) Gecko / 20100101 Firefox / 11.0
Zaakceptuj: tekst / 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
Kodowanie Accept: gzip, deflate
Połączenie: zachowaj -alive
Pochodzenie: null
Access-Control-Request-Method: POST
Access-Control-Request-Headers: mój-pierwszy-nagłówek, mój-drugi-nagłówek
Pragma: brak pamięci
podręcznej Kontrola pamięci podręcznej: brak pamięci podręcznej

Dlaczego moje niestandardowe nagłówki idą do Access-Control-Request-Headers:

Access-Control-Request-Headers: mój-pierwszy-nagłówek, mój-drugi-nagłówek

Spodziewałem się takich wartości nagłówka:

My-First-Header: pierwsza wartość
My-Second-Header: druga wartość

Czy to możliwe?

To, co zobaczyłeś w Firefoksie, nie było rzeczywistym żądaniem; zwróć uwagę, że metoda HTTP to OPCJE, a nie POST. W rzeczywistości była to prośba „przed lotem”, którą przeglądarka wysyła, aby ustalić, czy należy zezwolić na żądanie AJAX między domenami:

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

Nagłówek Kontrola dostępu-Żądanie-Nagłówki w żądaniu przed lotem zawiera listę nagłówków w rzeczywistym żądaniu. Serwer powinien następnie zgłosić, czy te nagłówki są obsługiwane w tym kontekście, czy nie, zanim przeglądarka prześle rzeczywiste żądanie.

Oto przykład, jak ustawić nagłówek żądania w wywołaniu Ajax 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));
  }
});

Poniższy kod działa dla mnie. Zawsze używam tylko pojedynczych cudzysłowów i działa dobrze. Sugeruję, abyś używał tylko pojedynczych cudzysłowów lub tylko podwójnych cudzysłowów, ale nie pomieszaj ich.

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

Ponieważ wysyłasz niestandardowe nagłówki, aby Twoje żądanie CORS nie było prostym żądaniem , więc przeglądarka najpierw wysyła żądanie OPCJI w ramach inspekcji wstępnej, aby sprawdzić, czy serwer zezwala na Twoje żądanie.

Jeśli włączysz CORS na serwerze, Twój kod będzie działał. Zamiast tego możesz również użyć pobierania JavaScript ( tutaj )

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>

Oto przykładowa konfiguracja, która włącza CORS na nginx (plik 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;
    }
}

Oto przykładowa konfiguracja, która włącza CORS na Apache (plik .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"

I dlatego nie możesz stworzyć bota za pomocą JavaScript, ponieważ twoje opcje są ograniczone do tego, co pozwala ci przeglądarka. Nie możesz po prostu zamówić przeglądarki, która jest zgodna z zasadami CORS , których przestrzega większość przeglądarek, aby wysyłać losowe żądania do innych źródeł i pozwalać na proste uzyskanie odpowiedzi!

Ponadto, jeśli spróbujesz ręcznie edytować niektóre nagłówki żądań, na przykład origin-headerz narzędzi programistycznych dostarczanych z przeglądarkami, przeglądarka odmówi edycji i może wysłać OPTIONSżądanie inspekcji wstępnej .

Spróbuj użyć klejnotu rack-cors . I dodaj pole nagłówka do połączenia Ajax.