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('script');
script.type = "text/javascript";
script.setAttribute('src', url);
document.getElementsByTagName('head')[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 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://当前页的域名' 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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
