Detaillierte Einführung in das Wissen über Cross-Domain von Javascript

Zusammenfassung der Kenntnisse über Über-Domäne von JS:

Bevor das Wort „Über-Domäne“ häufig verwendet wurde, haben wir es bereits häufig verwendet. Zum Beispiel wenn das img, src von A-Website auf eine bestimmte Bildadresse der B-Website verweist, wird dies in der Regel normal angezeigt (abgesehen von den Techniken zur Verhinderung von Raubkopien); Ebenso kann die src-Attribute des script-Tags auf Skripte von anderen Websites verweisen (in einigen Fällen wird dies sogar ermutigt, um die Vorteile der Lastverteilung anderer Websites voll auszuschöpfen und die Anzahl der Konvergenzen auf eigenen Servern zu verringern). Wenn jedoch Daten von anderen Websites aktiv angefordert werden, z.B. über AJAX, tritt das lästige Problem der Über-Domäne auf, das wir normalerweise als Über-Domäne bezeichnen. Aus Sicherheitsgründen wird der Zugriff über Domänen von den meisten Browsern standardmäßig verboten. Dies betrifft das Konzept der Same-Origin-Policy: Die Same-Origin-Policy verhindert, dass Skripte von einer Domain auf Dokumentattribute einer anderen Domain zugreifen oder Operationen durchführen. Dies bedeutet, dass der Domain der angeforderten URL mit der Domain der aktuellen Web-Seite übereinstimmen muss. Dies bedeutet, dass der Browser Inhalte aus verschiedenen Quellen isoliert, um ihre Operationen zu verhindern.

Die spezifischen Sicherheitsprobleme, die durch die Über-Domäne verursacht werden, haben der Blogger nicht vertieft, die Leute können es selbst nachdenken.

In vielen Fällen, insbesondere in der heutigen Zeit der ständigen Entwicklung des Internets, müssen wir前端接口 von verschiedenen Partnern oder Datenanbietern anfordern, bevor der Zugriff über Domänen nicht standardisiert ist (es scheint, dass der Bedarf an clientseitigem Zugriff über Domänen auch die Aufmerksamkeit von w erregt hat).3Achtung, c, nach den Angaben in den Unterlagen5 Der WebSocket-Standard unterstützt den Datenverkehr über Domänengrenzen und sollte auch eine zukünftige optionale Lösung für den Datenverkehr über Domänengrenzen sein. Welche Methoden können die Beschränkungen umgehen? Die Antworten gibt es viele (obwohl sie alle lästig sind), die häufigste ist die so genannte JSONP-Über-Domäne.

Prinzip von JSONP

Das grundlegendste Prinzip von JSONP besteht darin, einen <script>-Tag dynamisch hinzuzufügen, und das src-Attribut des script-Tags ist nicht durch Cross-Origin-Einschränkungen begrenzt. Auf diese Weise hat dieser Art der Cross-Origin-Kommunikation nichts mit dem XmlHttpRequest-Protokoll von AJAX zu tun.

JSONP ist JSON mit Padding. Wegen der Einschränkungen durch die Same-Origin-Policy erlaubt XmlHttpRequest nur die Anfrage von Ressourcen aus der aktuellen Quelle (Domain, Protokoll, Port). Um eine Cross-Origin-Anfrage durchzuführen, können wir das html-script-Tag verwenden, um eine Cross-Origin-Anfrage durchzuführen, und im Antwortkörper das auszuführende script zurückgeben. Diese Art der Cross-Origin-Kommunikation wird als JSONP bezeichnet.

Ein einfaches Beispiel:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
  <title>Test Jsonp</title> 
  <script type="text/javascript"> 
      function jsonpCallback(result) 
      { 
      alert(result.msg); 
      } 
    </script> 
  <script type="text/javascript" src="http://crossdomain.com/jsonServerResponse?jsonp=jsonpCallback"></script> 
</head> 
<body> 
</body> 
</html>

Kurzbeschreibung des Prinzips und des Verfahrens: Zunächst wird auf dem Client ein callback registriert, und der Name des Callbacks wird an den Server übermittelt (hier einigen sich Client und Server darauf, dass der Name des Callbacks als Query-String-Wert unter dem Key 'jsonp' übermittelt wird). Zu diesem Zeitpunkt generiert der Server JSON-Daten. Anschließend wird eine Funktion auf Basis der JavaScript-Syntax erstellt, deren Name der übermittelte Parameter 'jsonp' ist. Schließlich werden die JSON-Daten direkt als Parameter in die Funktion eingefügt, wodurch ein Dokument in JavaScript-Syntax erstellt wird, das an den Client zurückgegeben wird. Der Client browser interpretiert das script-Tag und führt das zurückgegebene JavaScript-Dokument aus, was bedeutet, dass die vorgedefinierte callback-Funktion ausgeführt wurde.

Aus der obigen Kurzkennzeichnung kann abgeleitet werden: Neben dem Rückgabe von JavaScript-Codefragmenten in Form von Funktionen kann der Server natürlich alle js-Fragmente, die den Normen entsprechen, ausführen.

Der Nachteil von JSONP ist: Es unterstützt nur GET-Anforderungen und nicht andere HTTP-Anforderungstypen wie POST; es unterstützt nur den Fall von Cross-Domain-HTTP-Anforderungen, kann jedoch nicht das Problem lösen, wie JavaScript-Aufrufe zwischen zwei Seiten in verschiedenen Domains durchgeführt werden können. (Darunter noch mehr)

jQuerys Jsonp

Wie erwähnt, ist jsonp nicht eine ajax-Anforderung, aber jQuery bietet dennoch eine Methode für Cross-Domain-Anforderungen, die mit jQuery.ajax übereinstimmt:

$.ajax({
  url: 'http://crossdomain.com/jsonServerResponse',
  type: 'GET',
  dataType: 'jsonp',
  jsonp: "callback",
  jsonpCallback: 'functionName',
  success: function (data, textStatus, jqXHR) { }
  //……
});

Wie oben gezeigt, wenn dataType auf jsonp gesetzt wird, bedeutet das, dass es sich um eine Cross-Domain-Anforderung handelt, jsonp wird als der Namensschlüssel der vom Server vorgesehenen Übermittlungsfunktion der Abfragezeichenkette, und jsonpCallback ist der Name der js-Funktion; falls jsonpCallback nicht festgelegt wird, generiert jQuery automatisch einen zufälligen Funktionennamen (eine globale Funktion im window-Objekt laden, die beim Einfügen des Codes ausgeführt wird und nach der Ausführung entfernt wird), kann geschlossen werden, dass die automatisch generierte Funktion die obige success-Funktion zurückruft. (Wenn jsonpCallback manuell zugewiesen wird, weiß man nicht, ob die success-Funktion zurückgerufen wird oder ob jQuery nach einer vorgeschriebenen Funktion sucht, wenn diese nicht gefunden wird, wird ein Fehler gemeldet? Der Blogger ist faul, das werde ich später noch testen.) Natürlich bietet jQuery eine einfache Version, $.getJSON, hier wird nicht weiter darauf eingegangen.

Zu beachten ist der jqXHR-Parameter in der success-Funktion, der im ajax-Anfordern das originale jqXHR-Objekt ist und auch als XMLHTTPRequest-Objekt (Vererbung oder Verpackung) betrachtet werden kann, aber im jsonp-Anfordern ist das nicht der Fall, bietet es fast keine Informationen wie die XMLHTTPRequest, die im XMLHTTPRequest am nützlichsten sind: Es fehlt die Anforgerstatusinformation von XMLHTTPRequest, daher kann es keine meisten Callback-Funktionen wie error, complete etc. auslösen (jQuery1.9.0），而可以被回调的success函数推测应该是由script标记的load事件触发，这也同ajax依靠XMLHTTPRequest的状态的机制完全不同。经试验，脱胎于jQuery的zepto（v1.1.3），在jsonp请求出现错误，比如加载js文档时头部返回401当出现错误时，error函数会执行，但是该函数的jqXHR参数也同样不是正宗的jqXHR类型，甚至不能通过它获取响应的头部信息。在这种情况下，我们只是被告知某个环节出错了，却并不知道具体的错误信息。类似响应头承载有用信息的场景，博主不建议使用jsonp。可以说，使用jsonp的一个前提是：除了网络异常等非业务异常外，所有业务异常（概括地说，乃是从服务器接收请求到返回响应这段时间内抛出的所有异常）都需要以请求结果的形式直接返回给客户端，便于客户端回调分析。

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

声明：本文内容来源于网络，版权归原作者所有。内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：notice#example.com，提供相关证据。3codebox.com（在发邮件时，请将#更换为@）进行举报，并提供相关证据。一经查实，本站将立即删除涉嫌侵权内容。

Grund教程

Dir gefällt vielleicht