Heim > Artikel > Web-Frontend > Teilen von Lösungen für domänenübergreifende Probleme in JavaScript

Teilen von Lösungen für domänenübergreifende Probleme in JavaScript

黄舟Original: 2017-07-18 10:02:191441Durchsuche

In diesem Artikel werden hauptsächlich relevante Informationen zu domänenübergreifenden Javascript-Problemen und -Lösungen vorgestellt. Freunde in Not können sich auf

domänenübergreifende Javascript-Probleme und -Lösungen beziehen

Was ist ein domänenübergreifendes Problem?

Dieses domänenübergreifende Problem wird durch die Same-Origin-Richtlinie des Browsers verursacht. Die angeforderte URL muss dasselbe Protokoll, denselben Domänennamen und denselben Port wie die URL des Browsers haben, andernfalls ist sie nicht zulässig . Zugriff auf

浏览器URL	要访问的URL	结果
http://www.123.com/index	http://www.123.com/server	成功
http://www.123.com/index	http://www.456.com/server	域名不相同，跨域
http://www.123.com:8080/index	http://www.123.com:8888/index.htm	端口不同，跨域
http://www.123.com/index	https://www.123.com/index	协议不同，跨域

Lösung

Jedes Tag mit dem src-Attribut kann domänenübergreifend sein, z. B. script, img, iframe-Tags

JSONP

JSONP ist die Anwendung von Skript-Tags. Der vollständige Name von JSONP besteht aus zwei Teilen, der Callback-Funktion und den Daten Die Antwort kommt. Die Funktion, die auf der Seite aufgerufen werden soll, der Name der Rückruffunktion wird in der Anfrage angegeben und die Daten sind die an die Rückruffunktion übergebenen JSON-Daten

Beispiel:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
  function jsonCallback(data){
    alert(data);
  };
  var url = "http://localhost:8888/test?callback=jsonCallback";
  var script = document.createElement(&#39;script&#39;); 
  script.type = "text/javascript";
  script.setAttribute(&#39;src&#39;, url); 
  document.getElementsByTagName(&#39;head&#39;)[0].appendChild(script);
</script>
</head>
<body>
</body>
</html>

Nachteile: Es ist nicht einfach zu bestätigen, ob die JSONP-Anfrage fehlgeschlagen ist

Sicherheitsprobleme, JSONP wird durch Laden von Code aus anderen Domänen ausgeführt, daher muss seine Zuverlässigkeit gewährleistet sein ermittelt werden

Die Ursache des domänenübergreifenden Problems

Das domänenübergreifende Problem ist auf die Same-Origin-Richtlinienbeschränkung des Browsers zurückzuführen. Die js des aktuellen Domänennamens können nur gelesen werden Die Fensterattribute in derselben Domäne.

Szenarien, in denen domänenübergreifende Probleme auftreten

Wenn js auf der Seite verwendet wird, um Daten von anderen Websites abzurufen, treten domänenübergreifende Probleme auf, z. B. die Verwendung von Ajax auf der Website zum Anfordern von Daten von anderen Websites Wenn Sie Daten von Wetter-, Express- oder anderen Datenschnittstellen und Hybrid-Apps anfordern, zeigt der Browser die folgende Fehlermeldung an. In diesem Szenario muss das domänenübergreifende Problem von js gelöst werden.

XMLHttpRequest cannot load http://你请求的域名. No &#39;Access-Control-Allow-Origin&#39; header is present on the requested resource. Origin &#39;http://当前页的域名&#39; is therefore not allowed access.

Welche Situationen verursachen domänenübergreifende Probleme?

Die URL einer Website umfasst den Protokollnamen, den Namen der Subdomäne, den Namen der Hauptdomäne und die Portnummer. Beispiel: https://github.com/, wobei https der Protokollname, www der Name der Subdomäne, github der Hauptdomänenname und die Portnummer 80 ist. Wenn Sie Daten von einer URL auf der Seite anfordern, wenn der Protokollname dieser URL. Wenn einer der Subdomänennamen, Hauptdomänennamen und Portnummern unterschiedlich ist, treten domänenübergreifende Probleme auf.
Auch wenn sich die Seitenanforderung http://127.0.0.1:80/ auf http://localhost:80/ befindet, treten domänenübergreifende Probleme auf

Lösen Sie domänenübergreifende Probleme

Domänenübergreifende Probleme lösen Domänenprobleme können auf folgende Weise gelöst werden

Jsonp verwenden
Server-Proxy
Der Server legt den Access-Control-Allow-Origin im Anforderungsheader fest, um ihn anzugeben der Domänenname, von dem Daten abgerufen werden können

Jsonps Lösung

json≠jsonp

Prinzip

Das Prinzip der Jsonp-Lösung für domänenübergreifende Probleme ist Stellen Sie sicher, dass das Skript-Tag des Browsers nicht durch dieselbe Ursprungsrichtlinie eingeschränkt ist (Sie können das src-Attribut des Skripts auf Ihrer Webseite festlegen, um nach dem Pfad der statischen Datei auf dem CDN-Server zu fragen). Dann können Sie das Skript-Tag verwenden, um Daten vom Server abzurufen. Fügen Sie bei der Anforderung einen Parameter namens callbakc=? hinzu, wobei die Nummer ? die Rückrufmethode ist, die Sie ausführen möchten.

Das obige ist der detaillierte Inhalt vonTeilen von Lösungen für domänenübergreifende Probleme in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Erläuterung der Javascript-Variablentypen und BereichsbeispieleNächster Artikel：Detaillierte Erläuterung der Javascript-Variablentypen und Bereichsbeispiele

In Verbindung stehende Artikel

Mehr sehen