Header für Zugriffssteuerungsanforderungen werden dem Header in AJAX-Anforderungen mit jQuery hinzugefügt

Ich möchte einer AJAX POST-Anfrage von jQuery einen benutzerdefinierten Header hinzufügen.

Ich habe das 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 schaue, sehe ich diesen Header:

OPTIONEN xxxx / yyyy HTTP / 1.1
Host: 127.0.0.1:6666
User-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
Akzeptieren-Sprache: fr, fr-fr; q = 0,8, en-us; q = 0,5, en; q = 0,3
Akzeptieren-Codierung: gzip, entleeren
Verbindung: behalten -alive
Herkunft: null
Zugriffssteuerungs-Anforderungsmethode: POST
Zugriffssteuerungs-Anforderungs-Header: Mein-erster-Header, mein-zweiter-Header
Pragma: kein Cache
Cache-Kontrolle: kein Cache

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

Access-Control-Request-Header: Mein-erster-Header, mein-zweiter-Header

Ich hatte folgende Header-Werte erwartet:

My-First-Header: erster Wert
My-Second-Header: zweiter Wert

Ist es möglich?

Was Sie in Firefox gesehen haben, war nicht die eigentliche Anfrage. Beachten Sie, dass die HTTP-Methode OPTIONS und nicht POST ist. Es war tatsächlich die Anforderung vor dem Flug, die der Browser stellt, um zu bestimmen, ob eine domänenübergreifende AJAX-Anforderung zulässig sein soll:

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

Der Header "Access-Control-Request-Headers" in der Anforderung vor dem Flug enthält die Liste der Header in der tatsächlichen Anforderung. Es wird dann erwartet, dass der Server zurückmeldet, ob diese Header in diesem Kontext unterstützt werden oder nicht, bevor der Browser die eigentliche Anforderung sendet.

Hier ist ein Beispiel zum Festlegen eines Anforderungsheaders in einem jQuery Ajax-Aufruf:

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

Dieser Code unten funktioniert für mich. Ich verwende immer nur einfache Anführungszeichen und es funktioniert gut. Ich schlage vor, Sie sollten nur einfache oder nur doppelte Anführungszeichen verwenden, aber nicht verwechselt.

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

Da Sie benutzerdefinierte Header senden, sodass Ihre CORS-Anforderung keine einfache Anforderung ist , sendet der Browser zunächst eine Preflight-OPTIONS-Anforderung, um zu überprüfen, ob der Server Ihre Anforderung zulässt.

Wenn Sie CORS auf dem Server aktivieren, funktioniert Ihr Code. Sie können stattdessen auch JavaScript-Abruf verwenden ( hier )

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 CORS unter nginx (Datei nginx.conf) aktiviert:

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 CORS in Apache aktiviert (.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"

Aus diesem Grund können Sie mit JavaScript keinen Bot erstellen, da Ihre Optionen auf die Möglichkeiten des Browsers beschränkt sind. Sie können nicht einfach einen Browser bestellen, der der CORS- Richtlinie folgt , der die meisten Browser folgen, um zufällige Anfragen an andere Ursprünge zu senden und die Antwort so einfach zu erhalten!

Wenn Sie versucht haben, einige Anforderungsheader manuell zu bearbeiten, z. B. origin-headervon den mit den Browsern gelieferten Entwicklertools, lehnt der Browser Ihre Bearbeitung ab und sendet möglicherweise eine Preflight- OPTIONSAnforderung.

Versuchen Sie, das Rack-Cors- Juwel zu verwenden. Fügen Sie das Header-Feld in Ihren Ajax-Aufruf ein.