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

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. <span style="font-size: 14px;">跨域</span>

Umriss der Frage

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

<span style="font-size: 14px;">Ajax-Anfragen domänenübergreifend </span><span style="font-size: 14px;">ajax请求跨域</span>(, 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):

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.

Die Anfragemethode ist eine der folgenden drei Methoden: HEAD, GET, POST
HTTP-Header-Informationen überschreiten nicht die folgenden Felder:
Akzeptieren
Accept-Language
Content-Language
Last-Event-ID
Content-Type (begrenzt auf drei Werte application/x-www-form-urlencoded, multipart/form-data, text/plain)

Jede Anfrage, die nicht gleichzeitig die beiden oben genannten Bedingungen erfüllt, ist eine nicht 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><span style="font-size: 14px;">No 'Access-Control-Allow-Origin' header is present on the requested resource</span>Die Antwort hatte den HTTP-Statuscode 404<span style="font-size: 14px;">The response had HTTP status code 404</span>

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:

<span style="font-size: 14px;">Kein „Access-Control-Allow“. -Origin'-Header ist auf der angeforderten Ressource vorhanden</span><code><span style="font-size: 14px;">No 'Access-Control-Allow-Origin' header is present on the requested resource</span> undDie Antwort hatte den HTTP-Statuscode 405<span style="font-size: 14px;">The response had HTTP status code 405</span>

Dieses Phänomen unterscheidet sich vom ersten. In diesem Fall erlaubt die Hintergrundmethode OPTIONS-Anfragen, aber einige Konfigurationsdateien (z. B. <span style="font-size: 14px;">安全配置</span>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><span style="font-size: 14px;">No 'Access-Control-Allow-Origin' header is present on the requested resource</span><span style="font-size: 14px;">Auf der angeforderten Ressource ist kein „Access-Control-Allow-Origin“-Header vorhanden</span><span style="font-size: 14px;">status 200</span> und

<p>Status 200<span style="font-size: 14px;"></span></p>

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

<span style="font-size: 14px;">heade contains multiple values '*,*'</span>Viertes Phänomen :

<p>heade enthält mehrere Werte '*,*'<span style="font-size: 14px;"></span></p>

<span style="font-size: 14px;">Access-Control-Allow-Origin:*</span>

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

<span style="font-size: 14px;">Access-Control-Allow-Origin:*</span>

• 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).

Implementierungsprinzip

Der Grund, warum JSONP zur Lösung domänenübergreifender Lösungen verwendet werden kann, liegt hauptsächlich darin, dass