Die umfassendste domänenübergreifende Ajax-Lösung-PHP-Tutorial-php.cn

In diesem Artikel stellen wir Ihnen die umfassendste domänenübergreifende Ajax-Lösung vor, seit ich zum ersten Mal mit der Front-End-Entwicklung in Kontakt kam 🎜> Es kommt bei mir immer wieder vor und ich habe 2016 auch N-übergreifende domänenbezogene Probleme behoben, aber ich habe immer noch das Gefühl, dass etwas passiert fehlt, also ordne ich es jetzt für einen Moment neu. 跨域

Umriss der Frage

In Bezug auf domänenübergreifend gibt es N-Typen. Dieser Artikel konzentriert sich nur auf

Ajax-Anfragen domänenübergreifend ajax请求跨域(, Ajax-domänenübergreifend ist nur ein Teil der „Same-Origin-Richtlinie“ des Browsers, andere umfassen domänenübergreifende Cookies, domänenübergreifende Iframes und domänenübergreifende LocalStorage-Anfragen -Domain usw., die hier nicht vorgestellt werden), der Inhalt ist ungefähr wie folgt:

Was ist Ajax-Cross-Domain

Prinzip
Leistung (organisierte einige aufgetretene Probleme und Lösungen)

So lösen Sie domänenübergreifendes Ajax

JSONP-Methode
CORS-Methode
Proxy-Anfragemethode

So analysieren Sie Ajax domänenübergreifend

Analyse der HTTP-Paketerfassung
Einige Beispiele

Was ist Ajax Cross-Domain

Das Prinzip des domänenübergreifenden Ajax

Ajax erscheint. Der Hauptgrund für die Anforderung domänenübergreifender Fehler liegt in der „Same-Origin-Richtlinie“ des Browsers >Same-Origin-Richtlinie des Browsers und seine Umgehungsmethoden (Ruan Yifeng)

CORS-Anfrageprinzip

CORS ist ein W3C-Standard, der vollständige Name lautet „Cross-Origin Resource Sharing“. Es ermöglicht dem Browser, XMLHttpRequest-Anforderungen an ursprungsübergreifende Server zu senden, wodurch die Einschränkung überwunden wird, dass AJAX nur von demselben Ursprung aus verwendet werden kann.

Grundsätzlich haben alle aktuellen Browser den CORS-Standard implementiert. Tatsächlich basieren fast alle Browser-Ajax-Anfragen auf dem CORS-Mechanismus. Allerdings sind Front-End-Entwickler normalerweise nicht besorgt (so). Tatsächlich berücksichtigt die aktuelle CORS-Lösung hauptsächlich die Implementierung des Hintergrunds.

Über CORS wird dringend empfohlen,

Detaillierte Erläuterung von CORS für die domänenübergreifende Ressourcenfreigabe (Ruan Yifeng)

zu lesen Darüber hinaus finden Sie hier auch eine Zusammenfassung des Implementierungsschemas (vereinfachte Version):

Die umfassendste domänenübergreifende Ajax-Lösung Wie man beurteilt, ob es einfach ist Anfrage?

Browser unterteilen CORS-Anfragen in zwei Kategorien: einfache Anfragen und nicht so einfache Anfragen. Sofern die beiden folgenden Bedingungen gleichzeitig erfüllt sind, handelt es sich um eine einfache Anfrage.

Ajax-Cross-Domain-Leistung

Um ehrlich zu sein, habe ich einen Artikel zusammengestellt und ihn dann als Lösung verwendet, aber später habe ich das gefunden Es war immer noch Viele Leute wissen immer noch nicht wie. Wir haben keine andere Wahl, als es zu debuggen, was zeit- und arbeitsintensiv ist. Aber selbst wenn ich es analysiere, werde ich nur anhand der entsprechenden Leistung beurteilen, ob es domänenübergreifend ist, daher ist dies sehr wichtig.

Wenn bei einer Ajax-Anfrage ein domänenübergreifendes Phänomen vorliegt und dieses nicht behoben wird, tritt das folgende Verhalten auf: (Beachten Sie, dass es sich um eine Ajax-Anfrage handelt. Bitte sagen Sie nicht, warum http-Anfragen in Ordnung sind Ajax jedoch nicht, da Ajax von domänenübergreifend begleitet wird, sodass nur eine HTTP-Anfrage ok nicht funktioniert Konfiguration.

Das erste Phänomen:

Auf der angeforderten Ressource ist kein „Access-Control-Allow-Origin“-Header vorhanden

und`<code>No 'Access-Control-Allow-Origin' header is present on the requested resource`Die Antwort hatte den HTTP-Statuscode 404`The response had HTTP status code 404`

Die umfassendste domänenübergreifende Ajax-Lösung

Die Gründe für diese Situation sind wie folgt:

Diese Ajax-Anfrage ist eine „nicht einfache Anfrage“, daher wird eine Preflight-Anfrage (OPTIONS) gesendet vor der Anfrage. )
Die serverseitige Hintergrundschnittstelle lässt keine OPTIONS-Anfragen zu, was dazu führt, dass die entsprechende Schnittstellenadresse nicht gefunden werden kann

Lösung: Backend erlaubt Optionsanforderung

Zweites Phänomen:

`Kein „Access-Control-Allow“. -Origin'-Header ist auf der angeforderten Ressource vorhanden`<code>No 'Access-Control-Allow-Origin' header is present on the requested resource undDie Antwort hatte den HTTP-Statuscode 405`The response had HTTP status code 405`

Die umfassendste domänenübergreifende Ajax-Lösung

Dieses Phänomen unterscheidet sich vom ersten. In diesem Fall erlaubt die Hintergrundmethode OPTIONS-Anfragen, aber einige Konfigurationsdateien (z. B. 安全配置Sicherheitskonfiguration ), das Blockieren der OPTIONS-Anfrage führt zu diesem Phänomen

Lösung: Schließen Sie die entsprechende Sicherheitskonfiguration im Backend

Das dritte Phänomen:<code>No 'Access-Control-Allow-Origin' header is present on the requested resource`Auf der angeforderten Ressource ist kein „Access-Control-Allow-Origin“-Header vorhandenstatus 200` und

Status 200 Die umfassendste domänenübergreifende Ajax-Lösung

Dieses Phänomen ähnelt Der erste und der zweite ist anders. In diesem Fall erlaubt der serverseitige Hintergrund OPTIONS-Anfragen und die Schnittstelle erlaubt auch OPTIONS-Anfragen, aber es liegt eine Nichtübereinstimmung vor, wenn der Header mit

Prüfen Sie beispielsweise den Ursprungsheader auf Nichtübereinstimmung, z. B. fehlende Headerunterstützung (z. B. den allgemeinen X-Requested-With-Header), und der Server gibt die Antwort dann an das Front-End zurück. Es löst XHR.onerror aus und führt dazu, dass das Frontend den Taiwan-Fehler kontrolliert

Lösung: Entsprechende Header-Unterstützung im Backend hinzufügen

`heade contains multiple values ','`Viertes Phänomen :

heade enthält mehrere Werte '*,*' Die umfassendste domänenübergreifende Ajax-Lösung

Die umfassendste domänenübergreifende Ajax-Lösung

Access-Control-Allow-Origin:*

Das Symptom ist, dass die Hintergrundantwort zwei http-Header enthält

Access-Control-Allow-Origin:*

Um ehrlich zu sein, liegt der Hauptgrund für dieses Problem darin, dass Personen, die eine domänenübergreifende Konfiguration durchführen, die Prinzipien nicht verstehen, was zu wiederholten Konfigurationen führt, wie zum Beispiel:
Wird häufig im .net-Backend angezeigt (normalerweise wird der Ursprung einmal in web.config konfiguriert und dann wird der Ursprung manuell zum Code hinzugefügt (z. B. der Code). legt die Rückgabe manuell fest *))

Häufig im .net-Hintergrund zu finden (Ursprung:* sowohl in IIS als auch in der Projekt-Webkonfiguration festlegen)

Lösung (Eins-zu-eins-Korrespondenz):
Es wird empfohlen, das manuell hinzugefügte * zu löschen Code und verwenden Sie nur das * in der Projektkonfiguration
Es wird empfohlen, die Konfiguration unter IIS* zu löschen und nur das in der Projektkonfiguration zu verwenden

So lösen Sie domänenübergreifende Ajax-Lösungen

Im Allgemeinen wird eine domänenübergreifende Ajax-Lösung wie folgt über JSONP oder CORS gelöst: (Hinweis , jetzt ist es gelöst, ich benutze JSONP fast nie mehr, also verstehe einfach JSONP)

JSONP löst domänenübergreifende Probleme

JSONP löst domänenübergreifende Probleme Es handelt sich um eine relativ alte Lösung (in der Praxis nicht empfohlen). Hier finden Sie eine kurze Einführung (wenn Sie JSONP in tatsächlichen Projekten verwenden möchten, verwenden Sie im Allgemeinen JQ und andere Klassenbibliotheken, die JSONP kapseln, um Ajax-Anfragen zu stellen).