1. Browser-Richtlinie des gleichen Ursprungs
"Gleicher Ursprung": gleiches Protokoll, gleicher Domänenname, gleicher Port
„Same-Source Purpose“: Nur Dateien auf einem Server können miteinander interagieren, und Dateien zwischen mehreren Servern sind verboten
1995 wurde von Netscape die Same-Origin-Policy in Browsern eingeführt, deren ursprünglicher Zweck darin bestand, dass Cookies, die von einer bestimmten Seite gesetzt wurden, nur von deren „Same-Origin“-Seite geöffnet werden konnten. Wenn zwei Seiten das gleiche Protokoll, den gleichen Domänennamen und den gleichen Port haben, dann gehören die beiden Seiten zum gleichen Ursprung, und solange eine von ihnen unterschiedlich ist, ist es ein unterschiedlicher Ursprung.
Beispiel: Für die Website http://www.example.com/dir/page.html ist das Protokoll http://, der Domänenname www.example.com und der Port 80 (der Standardport kann weggelassen werden). Seine Homologie ist wie folgt.
| http://www.example.com/dir2/other.html | Homolog |
| http://example.com/dir/other.html | Anderer Ursprung (anderer Domainname) |
| http://v2.www.example.com/dir/other.html | Anderer Ursprung (anderer Domainname) |
| http://www.example.com:81/dir/other.html | Unterschiedliche Quellen (unterschiedliche Ports) |
Zweck: Der Zweck der Same-Origin-Richtlinie besteht darin, die Sicherheit von Benutzerinformationen zu gewährleisten und zu verhindern, dass böswillige Websites Daten stehlen
Einschränkungen: Mit der Entwicklung des Internets wurde die "Same Origin Policy" immer strenger. Derzeit gibt es drei Verhaltensweisen, die eingeschränkt sind, wenn sie nicht denselben Ursprung haben:
(1) Cookie, LocalStorage und IndexDB können nicht gelesen werden.
(2) DOM kann nicht bezogen werden
(3) AJAX-Anfrage kann nicht gesendet werden
Alles hat Vor- und Nachteile, Einschränkungen sind zwar notwendig, aber in manchen Fällen wird auch die vernünftige Nutzung durch die „Same Origin Policy“ beeinträchtigt. Daher sind einige der Methoden, die ich Ihnen vorstellen werde, um die oben genannten Einschränkungen zu umgehen, der Ursprung von [domainübergreifend].
Zwei, domänenübergreifendes Ajax
Ajax Cross-Domain bezieht sich auf die domänenübergreifende Verarbeitung von Ajax-Anforderungen, anstatt domänenübergreifende Methoden in Ajax bereitzustellen. Die Same-Origin-Policy schreibt klar vor, dass Ajax-Requests nur an URLs gleichen Ursprungs gesendet werden dürfen, da es sonst zu domainübergreifenden Fehlern kommt. Zusätzlich zum Festlegen des Proxys gibt es drei gängige Methoden zum Lösen von domänenübergreifenden Problemen auf der Seite
① Legen Sie den Server-Antwort-Header fest
② Agent
③JSONP
3. JSONP domänenübergreifend (nur Support-Get-Request)
JSONP ist die gebräuchlichste Methode für die Cross-Origin-Kommunikation zwischen Servern und Clients. Das größte Merkmal ist, dass es einfach und anwendbar ist, alle altmodischen Browser unterstützt werden und die Transformation des Servers sehr gering ist.
Essenz: Verwenden Sie tatsächlich das script-Tag, um die js-Datei vorzustellen, und erklären Sie das Prinzip der Ausführung
Anweisungen
① Fügen Sie Skript-Tags in HTML ein und verwenden Sie Skript-Tags, um Cross-Origin-Anfragen zu initiieren
② Simulieren Sie Funktionsaufrufe, indem Sie Strings in der entsprechenden PHP-Datei auf dem Server verketten. Und die zurückzugebenden Daten werden über den Callback-Funktionsparameter zurückgegeben.
③ Schreiben Sie auf der HTML-Seite explizit die Callback-Funktion. Auf diese Weise wird die entsprechende Callback-Funktion automatisch ausgeführt, wenn die ursprungsübergreifende Anfrage abgeschlossen ist.
Vorteil:
(1) Da das Skript Skript als Anfrage verwendet wird, gibt es eigentlich keinen Unterschied zwischen der Anfrage und dem herkömmlichen importierten js-Skript.
(2) In den zurückgegebenen Daten versuchen wir auch, die Syntax der js-Aufruffunktion zu simulieren, sodass sie automatisch aufgerufen wird, solange die Callback-Funktion auf der Seite deklariert ist.
(3) Darüber hinaus werden die als Parameter verwendeten [serverseitigen] JSON-Daten direkt als Objekt in js erkannt, sodass der Schritt der Verwendung von JSON.parse auch in der Callback-Funktion vermieden wird.
4. Interviewpunkt
(1) Warum JSONP kein echtes AJAX ist
JSONP verwendet das SRC-Attribut im Skript, um Parameter zum Übertragen von Daten zu übertragen, und hat nichts mit dem XMLHttpRequest-Objekt zu tun.
Wesentlich anders:
Der Kern von Ajax besteht darin, Nichtseiteninhalte über XMLHttpRequest abzurufen
Der Kern von jsonp besteht darin, Skript-Tags dynamisch hinzuzufügen, um das vom Server bereitgestellte js-Skript aufzurufen
jsonp unterstützt nur Get-Anfragen, Ajax unterstützt Get- und Post-Anfragen