web-dev-qa-db-de.com

Header in AJAX -Anforderung mit jQuery hinzufügen

Ich möchte einen benutzerdefinierten Header zu einer AJAX POST -Anforderung von jQuery 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 Sie: 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
Zugriffskontrollanforderungsmethode: POST
Zugriffssteuerungsanforderungs-Header: mein-erster-Header, mein-zweiter-Header
Pragma: kein Cache
Cache-Kontrolle: kein Cache

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

Zugriffskontrollanforderungs-Header: mein-erster-Header, mein-zweiter-Header

Ich habe folgende Header-Werte erwartet:

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

Ist es möglich?

365
fingerup

Was Sie in Firefox gesehen haben, war nicht die eigentliche Anfrage. Beachten Sie, dass die HTTP-Methode OPTIONS und nicht POST ist. Tatsächlich war es die "Pre-Flight" -Anforderung, die der Browser sendet, 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 Pre-Flight-Anfrage enthält die Liste der Header in der aktuellen Anfrage. Es wird dann vom Server erwartet, dass er zurückmeldet, ob diese Header in diesem Kontext unterstützt werden oder nicht, bevor der Browser die tatsächliche Anforderung sendet.

132
karlgold

Im Folgenden finden Sie 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));
  }
});
412
milkovsky

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

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

Hoffe das beantwortet deine Frage ...

146
G-raph

Da Sie benutzerdefinierte Header senden, ist Ihre CORS-Anfrage NICHT EINFACHE ANFRAGE . Der Browser sendet also zuerst eine Prefilight-OPTIONEN-Anfrage, um zu überprüfen, ob der Server Ihre Anfrage zulässt.

enter image description here

Wenn Sie CORS auf dem Server aktivieren, funktioniert Ihr Code. Sie können stattdessen auch js fetch 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 einschaltet (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 CORS unter Apache einschaltet (.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"
5

Aus diesem Grund können Sie mit Javascript keinen Bot erstellen, da Ihre Optionen auf das beschränkt sind, was der Browser Ihnen erlaubt. Sie können nicht einfach einen Browser bestellen, der der CORS -Richtlinie folgt, die die meisten Browser befolgen, um zufällige Anfragen an andere Herkunftsländer zu senden und eine so einfache Antwort zu erhalten!

Wenn Sie außerdem versucht haben, einige Anforderungsheader wie Origin-header aus den Entwicklertools, die mit den Browsern geliefert werden, manuell zu bearbeiten, lehnt der Browser die Bearbeitung ab und sendet möglicherweise eine Preflight-Anforderung OPTIONS.

1
the accountant