So anzeigen oder simulieren Sie eine mobile Vorschau der Website eines Benutzers in einer Website

Wie kann ich eine mobile Vorschau der Zielwebsite in Ihre Website einbetten? Aufgrund der Einschränkungen der homologen Richtlinien kann die Verwendung von IFRames direkt mit Kreuzdomänenproblemen auftreten. In diesem Artikel wird die Verwendung von Reverse-Proxy zum Hinzufügen von CORS-Headern zur Lösung von Cross-Domänen-Problemen vorgestellt und Beispiele für die Verwendung von IFRames und Reverse-Proxy zur Implementierung mobiler Voransichten bereitgestellt.

Verwenden Sie Reverse Proxy, um Cross-Domänen-Probleme zu lösen

Das Laden der Zielwebsite direkt im IFrame kann "sich geweigert werden, um eine Verbindung herzustellen" -Fehler, da die homologe Richtlinie des Browsers Cross-Domänen-Anforderungen verhindert. Um dieses Problem zu lösen, können Sie einen Reverse-Proxy verwenden, der als Mittelsmann fungiert, Inhalte vom Zielserver erhält und an den Client zurückgibt, während Sie den CORS-Header (Cross-Domain-Ressourcenfreigabe) hinzufügen.

CORS Anywhere ist ein häufig verwendeter NodeJS Reverse -Proxy, der automatisch CORS -Header hinzufügt.

CORS überall einsetzen

1. Installieren Sie NodeJS und NPM: Stellen Sie sicher, dass NodeJs und NPM (Node Package Manager) auf Ihrem Server installiert sind.

2. Installieren Sie CORS überall: Verwenden Sie NPM, um CORs überall zu installieren:

    npm install -g cors -anywhere

3. Führen Sie CORS überall aus: Starten Sie den CORS Anywhere Service:

    CORS-JEDENWHER-Origin "*"-RequireHeader-Ursprung

   • -Origin "*" ermöglicht Anfragen aus einer Domäne (die Produktionsumgebung wird nicht empfohlen, der zulässige Domänenname sollte angegeben werden).
   • -RequireHeader Origin erfordert, dass die Anfrage den Ursprungs-Header enthalten muss.

Verwenden von Reverse Proxy in Iframe

Nachdem Sie CORs überall bereitgestellt haben, können Sie die Proxy -URL im IFrame verwenden.

 <iframe id="Vorschau-Frame1" src="http:%20//%20your-cors-anywhere-server/https:%20//www.kd-brows.com/" style="Höhe: 547px; Breite: 320px;">/iframe></iframe>

Ersetzen Sie http: // your-cors-anwhere-server durch die Adresse Ihres CORS Anywhere Server. https://www.kd-brows.com/ Ersetzen Sie durch die Adresse der Website, die Sie vorschau möchten.

Anmerkungen:

• Sicherheit: -Origin "*" verfügt über Sicherheitsrisiken in Produktionsumgebungen und sollte so konfiguriert werden, dass der Zugriff nur auf Ihren Domänennamen ermöglicht.
• Leistung: Die Verwendung eines Reverse -Proxy erhöht die Latenz von Anforderungen, da zusätzliche Server erforderlich sind.
• CORS Anywhere Einschränkungen: CORs überall selbst können Ratengrenzen oder andere Einschränkungen aufweisen und müssen gemäß den tatsächlichen Bedingungen angepasst werden.
• Beschränkungen für Zielwebsites: Einige Websites blockieren möglicherweise immer noch den Zugriff über den Proxy, auch wenn CORS -Header hinzugefügt werden.

Verwenden Sie Curl, um den Seitenquellcode (alternativ) abzurufen

Eine andere Möglichkeit besteht darin, Curl zu verwenden, um den HTML -Quellcode der Zielwebsite auf der Serverseite zu erhalten und ihn dann auf Ihrer Website zu analysieren und anzuzeigen. Diese Methode kann die homologe Richtlinie des Browsers umgehen, erfordert jedoch die serverseitige Unterstützung.

PHP -Beispiel:

  Php
Funktion get_page_content ($ url) {
  $ ch = curl_init ();
  curl_setopt ($ ch, curlopt_url, $ url);
  curl_setopt ($ ch, curlopt_returntransfer, 1);
  curl_setopt ($ ch, curlopt_useragent, 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebkit/537,36 (khtml, wie Gecko) Chrom/58.0.3029.110 Safari/537.36'); // Benutzer-Agent setzen
  $ output = curl_exec ($ ch);
  curl_close ($ ch);
  $ output zurückgeben;
}

$ url = 'https://www.kd-brows.com/';
$ content = get_page_content ($ url);

// $ content verarbeiten hier, zum Beispiel den Schlüsselinhalt extrahieren und echo "<pre class="brush:php;toolbar:false">" anzeigen. htmlspecialChars ($ content). "

Anmerkungen:

• Benutzer-Agent: Das Einstellen von curlopt_useragent kann das Browserverhalten simulieren und vermeiden, dass der Zugriff, der von der Zielwebsite als Crawler erkannt wird, verweigert wird.
• Seitenanalyse: Nach dem Erhalt des HTML -Quellcode muss er analysiert und den angezeigten Inhalt extrahiert werden. Sie können das Domdocument von PHP oder andere HTML -Parsing -Bibliotheken verwenden.
• Ressourcenbelastung: Curl erhält nur HTML -Quellcode und lädt Ressourcen wie CSS, JavaScript usw. nicht automatisch. Diese Ressourcen müssen manuell verarbeitet werden, z. B. das Ändern der URL, um auf Ihren Server zu verweisen.
• Rechtsrisiko: Wenn Sie Inhalte von anderen Websites kriechen und verwenden, müssen Sie die relevanten Gesetze und Vorschriften sowie die Nutzungsbedingungen der Website einhalten.

Zusammenfassen

Dieser Artikel beschreibt zwei Möglichkeiten, eine mobile Vorschau der Website eines Benutzers in einer Website anzuzeigen oder zu simulieren: Verwenden eines Reverse -Proxy und Verwendung von CURL, um den Seitenquellcode zu erhalten. Die Methode zur Verwendung von Reverse -Proxy ist einfach und einfach zu bedienen, erfordert jedoch Bereitstellung und Wartung des Reverse -Proxy -Servers. Die Methode der Verwendung von Curl ist flexibler, erfordert jedoch die Seitensprech- und Ressourcenbelastung, und es müssen rechtliche Risiken beachtet werden. Welche Methode zu wählen, hängt von Ihren spezifischen Anforderungen und technischen Funktionen ab.

Das obige ist der detaillierte Inhalt vonSo anzeigen oder simulieren Sie eine mobile Vorschau der Website eines Benutzers in einer Website. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!