jquery ajax domänenübergreifende Anforderungsfehlermeldung

Mit der Entwicklung der Front-End-Technologie wird die Nutzung von jQuery immer häufiger. Unter diesen ist es sehr üblich, Ajax-Anfragen in jQuery zu verwenden, um Daten abzurufen. In der tatsächlichen Entwicklung treten jedoch einige Probleme auf, wenn domänenübergreifende Anfragen auftreten.

1. Was ist eine domänenübergreifende Anfrage?

Unter demselben Domainnamen kann die Ajax-Anfrage des Browsers frei senden und empfangen. Unter verschiedenen Domänennamen sind Ajax-Anfragen im Browser jedoch durch Sicherheitsrichtlinien eingeschränkt und Daten können nicht nach Belieben gesendet und empfangen werden. Auf diese Weise kommt es zu domänenübergreifenden Anfragen.

2. Warum tritt ein domänenübergreifender Anforderungsfehler auf?

Aus Sicherheitsgründen übernimmt der Browser die Same-Origin-Richtlinie. Die Same-Origin-Richtlinie bedeutet, dass Client-Skripte aus unterschiedlichen Quellen die Ressourcen anderer Quellen nicht ohne ausdrückliche Autorisierung lesen können. Unter der Same-Origin-Richtlinie können sich Client-Skripte aus unterschiedlichen Quellen nicht gegenseitig stören, wodurch die Sicherheit von Webanwendungen gewährleistet wird.

Konkret bedeutet Homologie, dass das Protokoll, der Domänenname und die Portnummer völlig gleich sind.

3. So lösen Sie domänenübergreifende Anforderungsfehler

Mit dem oben genannten Hintergrundwissen können wir dieses Problem bei domänenübergreifenden Anforderungsfehlern lösen.

1. JSONP domänenübergreifende Anfrage

JSONP (JSON mit Padding) ist eine Lösung für domänenübergreifende Anfragen. Sein Prinzip besteht darin, dass das Front-End bei einer Anfrage dynamisch ein Skript-Tag erstellt und einen Rückruffunktionsnamen übergibt und die vom Server zurückgegebenen Daten in der Rückruffunktion ausgeführt werden.

Die spezifischen Schritte sind wie folgt:

1) Front-End-Code

$.ajax({
    url:'/api/get-data',
    dataType:'jsonp',
    jsonp:'callback',
    success:function (data) {
        console.log(data);
    }
});

Beschreibung:

url: angeforderte Schnittstellenadresse

dataType: Datentyp, hier ist JSONP

JSONP: Clientanforderungsfunktion, der Funktionsname wird sein: Als Name der Rückruffunktion

Erfolg: Die Anfrage ist erfolgreich

2) Backend-Code

(1) Fügen Sie den Anforderungsparameter Callback vor dem Rückgabewert hinzu

{
'name':'Tom',
'age':23,
'sex':'male',
'callbackCode':1
}

(2) Ergebnisse zurückgeben

callbacks.callbackCode({"name":"Tom","age":23 ,"sex": "Male"});

Unter diesen ist callbackCode der vom Front-End festgelegte Name der Anforderungsmethode.

Ein weiteres Beispiel:

(1) Der Anforderungsparameter Callback wird vor dem Rückgabewert hinzugefügt

{
'code':'0',
'data':{

   'name':'Tom',
   'age':23,
   'sex':'男',

},
'message':'Request erfolgreich! ',
'callbackCode':1
}

(2) Das Backend verwendet den callbackCode-Parameter, um die Callback-Funktion zu verbinden.

callbacks.callbackCode({"code": "0", "data": {"name": "Tom", "age": 23, "sex": "männlich"},"message": "Anfrage erfolgreich ! "});

Durch die oben genannten Schritte können wir JSONP verwenden, um domänenübergreifende Anfragen zu stellen. Allerdings weist JSONP auch einige Einschränkungen auf, z. B. unterstützt es nur GET-Anfragen und ist nicht in der Lage, Antworten auf POST-Anfragen zu erhalten.

2. Fügen Sie den Antwortheader „Access-Control-Allow-Origin“ hinzu

Eine andere Möglichkeit besteht darin, ihn an der Backend-Schnittstelle festzulegen und das Feld „Access-Control-Allow-Origin“ im Antwortheader hinzuzufügen, um den anfordernden Browser anzuweisen, dies zuzulassen Cross-Origin-Anfragen.

Codebeispiel:

@RequestMapping("/api/get-data")
@RestController
öffentliche Klasse GetDataController {

@GetMapping
public String getData(HttpServletRequest request) {
    String callback = request.getParameter("callback");

    //模拟后端返回数据
    String json = "{"name":"Tom","age":23,"sex":"男"}";

    //跨域请求响应头设置
    String result = callback + "(" + json + ")";
    return result;
}

}

Unter anderem wird die Methode über @GetMapping auf /api/get- abgebildet Annotationsdatenschnittstelle, dann den Rückruf des Anforderungsparameters abrufen, das Backend simulieren, um Daten zurückzugeben, und schließlich die JSON-Daten in Form einer Rückruffunktion über die Ergebnisvariable zurückgeben.

Durch die beiden oben genannten Methoden können wir das Problem domänenübergreifender Anforderungsfehler lösen.

Zusammenfassung:

Durch die Einleitung dieses Artikels verstehen wir, was domänenübergreifende Anforderungen sind, warum domänenübergreifende Anforderungsfehler auftreten und wie domänenübergreifende Anforderungsfehler behoben werden können. Darunter haben wir hauptsächlich zwei Methoden eingeführt: eine domänenübergreifende JSONP-Anfrage und das Hinzufügen des Antwortheaders Access-Control-Allow-Origin. Natürlich kann die Wahl unterschiedlicher Methoden zur Lösung von Problemen in unterschiedlichen Szenarien den Anforderungen wirklich gerecht werden.

Das obige ist der detaillierte Inhalt vonjquery ajax domänenübergreifende Anforderungsfehlermeldung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!