Intestazioni richieste controllo accesso, viene aggiunto all'intestazione nella richiesta AJAX con jQuery

Vorrei aggiungere un'intestazione personalizzata a una richiesta POST AJAX da jQuery.

Ho provato questo:

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

Quando invio questa richiesta e guardo con FireBug, vedo questa intestazione:

OPZIONI xxxx / yyyy
Host 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
Accetta: 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
Connessione: keep -alive
Origine: null
Accesso-Controllo-Richiesta-Metodo: POST
Accesso-Controllo-Richiesta-Intestazioni: my-first-header, my-second-header
Pragma: no-cache
Controllo cache: no-cache

Perché le mie intestazioni personalizzate vanno a Access-Control-Request-Headers:

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

Mi aspettavo un valore di intestazione come questo:

My-First-Header: primo valore
My-Second-Header: secondo valore

È possibile?

Quello che hai visto in Firefox non è stata la vera richiesta; si noti che il metodo HTTP è OPTIONS, non POST. In realtà era la richiesta "pre-volo" che il browser invia per determinare se una richiesta AJAX tra domini dovrebbe essere consentita:

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

L'intestazione Access-Control-Request-Headers nella richiesta pre-volo include l'elenco di intestazioni nella richiesta effettiva. Si prevede quindi che il server riporti se queste intestazioni sono supportate o meno in questo contesto, prima che il browser invii la richiesta effettiva.

Ecco un esempio di come impostare un'intestazione di richiesta in una chiamata 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));
  }
});

Questo codice qui sotto funziona per me. Uso sempre solo virgolette singole e funziona benissimo. Ti suggerisco di usare solo virgolette singole o solo virgolette doppie, ma non confuse.

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

Poiché invii intestazioni personalizzate in modo che la tua richiesta CORS non sia una semplice richiesta , il browser invia prima una richiesta OPTIONS di verifica preliminare per verificare che il server accetti la tua richiesta.

Se si attiva CORS sul server, il codice funzionerà. Puoi anche usare JavaScript fetch ( qui )

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>

Ecco una configurazione di esempio che attiva CORS su nginx (file 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;
    }
}

Ecco una configurazione di esempio che attiva CORS su Apache (file .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"

Ecco perché non puoi creare un bot con JavaScript, perché le tue opzioni sono limitate a ciò che il browser ti consente di fare. Non puoi semplicemente ordinare un browser che segue la politica CORS , seguita dalla maggior parte dei browser, per inviare richieste casuali ad altre origini e consentirti di ottenere la risposta semplicemente!

Inoltre, se si è tentato di modificare manualmente alcune intestazioni di richiesta, ad esempio origin-headerdagli strumenti per sviluppatori forniti con i browser, il browser rifiuterà la modifica e potrebbe inviare una OPTIONSrichiesta di verifica preliminare .

Prova a usare la gemma rack-cors . E aggiungi il campo dell'intestazione nella tua chiamata Ajax.