Access Control Request Headers, wird mit jQuery zu den Headern in AJAX-Anfragen hinzugefügt

Question

Ich möchte eine benutzerdefinierte Kopfzeile zu einer AJAX POST-Anfrage von jQuery hinzufügen.

Das habe ich versucht:

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

Wenn ich diese Anfrage sende und mit FireBug beobachte, sehe ich diesen Header:

OPTIONEN xxxx/yyyy HTTP/1.1
Rechner: 127.0.0.1:6666
Benutzer-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:11.0) Gecko/20100101 Firefox/11.0
Akzeptieren: 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
Verbindung: keep-alive
Herkunft: null
Zugriffskontroll-Request-Methode: POST
Zugriffskontroll-Request-Kopfzeilen: meine-erste-Kopfzeile,meine-zweite-Kopfzeile
Pragma: no-cache
Cache-Kontrolle: no-cache

Warum gehen meine benutzerdefinierten Kopfzeilen zu Access-Control-Request-Headers :

Zugriffskontroll-Request-Kopfzeilen: meine-erste-Kopfzeile,meine-zweite-Kopfzeile

Ich hatte eine Kopfzeile wie diese erwartet:

Meine-Erste-Kopfzeile: erster Wert
My-Second-Header: zweiter Wert

Ist das möglich?

Answer 1

Hier ist ein Beispiel, wie man einen Request Header in einem jQuery Ajax Aufruf setzt:

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

Der folgende Code funktioniert bei mir. Ich verwende immer nur einfache Anführungszeichen, und es funktioniert gut. Ich schlage vor, Sie sollten nur einfache Anführungszeichen verwenden oder nur doppelte Anführungszeichen, aber nicht durcheinander.

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

Answer 3

Was Sie in Firefox gesehen haben, war nicht die eigentliche Anfrage; beachten Sie, dass die HTTP-Methode OPTIONS und nicht POST ist. Es handelte sich um die "Pre-Flight"-Anfrage, die der Browser stellt, um festzustellen, ob eine domänenübergreifende AJAX-Anfrage zulässig ist:

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

Die Kopfzeile Access-Control-Request-Headers in der Preflight-Anfrage enthält die Liste der Kopfzeilen in der eigentlichen Anfrage. Vom Server wird dann erwartet, dass er zurückmeldet, ob diese Header in diesem Kontext unterstützt werden oder nicht, bevor der Browser die eigentliche Anfrage absetzt.

Answer 4

Weil Sie benutzerdefinierte Kopfzeilen senden, damit Ihre CORS-Anfrage _keine einfache Bitte_ Daher sendet der Browser zunächst eine OPTIONS-Anfrage, um zu prüfen, ob der Server Ihre Anfrage zulässt.

Wenn Sie CORS auf dem Server einschalten, wird Ihr Code funktionieren. Sie können stattdessen auch JavaScript fetch verwenden ( aquí )

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>

Hier ist eine Beispielkonfiguration, die Folgendes einschaltet CORS auf nginx (Datei 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;
    }
}

Hier ist eine Beispielkonfiguration, die Folgendes einschaltet CORS auf Apache (.htaccess-Datei)

# ------------------------------------------------------------------------------
# | 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"

Answer 5

Deshalb kann man auch keinen Bot mit JavaScript erstellen, denn die Möglichkeiten des Browsers sind begrenzt. Man kann nicht einfach einen Browser bestellen, der den CORS Richtlinie, die von den meisten Browsern befolgt wird, um zufällige Anfragen an andere Ursprünge zu senden und Ihnen die Möglichkeit zu geben, die Antwort einfach zu erhalten!

Wenn Sie außerdem versucht haben, einige Anfrage-Header manuell zu bearbeiten, wie origin-header aus den Entwickler-Tools, die mit den Browsern geliefert werden, wird der Browser Ihre Bearbeitung ablehnen und möglicherweise eine Preflight OPTIONS Anfrage.