2016-06-06 10 views
6

Ich habe versucht, diese beiden Dinge getrennt:XMLHttpRequest/Ajax-Set Content-Type

Anmerkung: url ist eine Variable, eine https-URL und jsonString enthält einen gültigen JSON-String

var request = new XMLHttpRequest(); 
try{ 
    request.open("POST", url); 
    request.setRequestHeader('Accept', 'application/json'); 
    request.send(jsonString); 
} catch(e) { 
    alert(e); 
} 

und

enthält

Das Problem ist das System, das wir buchen, erfordert eine Überschrift Content-Type mit einem Wert "application/json".

Mit der Art, wie die Dinge jetzt sind, ist die verwendete Methode POST, der Accept-Header ist "application/json" und der Content-Type-Standardeinstellungen "application/x-www-form-urlencoded; charset = UTF- 8 "

Im ersten Beispiel, wenn request.setRequestHeader ('Content-Type', 'application/json'); Wird 1 Zeile über oder unter dem Accept-Header hinzugefügt, ändert sich die verwendete Methode zu OPTIONS, der Accept-Header ändert sich zu "text/html, application/xhtml + xml, application/xml; q = 0,9, /; q = 0,8" und der Content-Type-Header verschwindet, als ob er nicht gesehen wurde.

Im zweiten Beispiel, wenn contentType: "application/json" irgendwo innerhalb von Optionen hinzugefügt wird, passiert das gleiche wie im ersten Beispiel.

Was ist der richtige Weg, um einen Content-Type-Header in Ajax oder XMLHttpRequest zu setzen?

Edit: Ich sollte hinzufügen, dass mit dem Firefox-Rest-Client-Plugin, die JSON-Zeichenfolge, URL und akzeptieren und Content-Typ-Header alle gut funktionieren. Wir können den Inhaltsheader einfach nicht auf unserer eigenen Seite erscheinen lassen.

+0

Haben Sie ein Beispiel? Niemals zuvor das XMLHttpRequest-Objekt verwendet, aber die Einstellung contentType auf "application/json" sollte für jquery funktionieren. Ich denke auch nicht, dass es eine "akzeptieren" -Einstellung gibt. Eine OPTIONS-Preflight-Anforderung tritt auch auf, wenn ein domänenübergreifender Aufruf ausgeführt wird. Machst du das? – georaldc

+0

Ich meine, ein OPTIONS-Preflight tritt auf, wenn ein domainübergreifender Aufruf mit einem Inhaltstyp-Wert anders als als der Standard "application/x-www-form-urlencoded; charset = UTF-8" mit JQuery.ajax() – georaldc

Antwort

6

Im ersten Beispiel, wenn request.setRequestHeader ('Content-Type', 'application/json'); wird 1 Zeile oberhalb oder unterhalb der Accept-Header, die verwendete Methode, um OPTIONS Änderungen

Dies liegt daran, Sie a cross origin request von JS machen in einer Webseite eingebettet ist. Das Ändern der content-type (zu einer, die Sie nicht mit einem einfachen HTML-Formular erstellen konnten) löst a preflight request aus, die Erlaubnis vom Server anfordert, die tatsächliche Anforderung vorzunehmen.

Sie müssen den Server so einrichten, dass er mit entsprechenden CORS-Headern antwortet, um die Berechtigung zu erteilen.

HTTP/1.1 200 OK 
Date: Mon, 01 Dec 2008 01:15:39 GMT 
Access-Control-Allow-Origin: http://your.site.example.com 
Access-Control-Allow-Methods: POST, GET, OPTIONS 
Access-Control-Allow-Headers: Content-Type 

Dann wird der Browser machen die POST-Anfrage Sie fragen zu machen.

+0

warum löscht das firefox rest client plugin nicht eine Crossursprungsanfrage? oder wenn ja, warum kann es ohne Probleme durchgehen? – backcab

+2

@backcab - Weil es Software und nicht ein bisschen JavaScript von einer nicht vertrauenswürdigen Website installiert ist. – Quentin

Verwandte Themen