Vue wird online bereitgestellt, um domänenübergreifende Probleme zu lösen

Vue.js ist ein beliebtes JavaScript-Framework zum Erstellen von Single-Page-Anwendungen (SPA). Bei der Entwicklung von Vue-Anwendungen können domänenübergreifende Probleme auftreten. Domänenübergreifende Probleme verhindern häufig, dass Browser Ressourcen unterschiedlicher Herkunft laden. Tatsächlich können domänenübergreifende Probleme bei der Bereitstellung von Vue-Anwendungen in vielerlei Hinsicht zu Engpässen führen. In diesem Artikel wird die Bereitstellung von Vue.j vorgestellt und gleichzeitig der Schwerpunkt auf der Lösung domänenübergreifender Probleme gelegt.

Was ist domänenübergreifend?

Wenn im Browser ein Skript im Dokumentbaum einer Webseite ausgeführt wird, kann das ausgeführte Skript auf jeden Teil des Dokumentbaums zugreifen. Allerdings treten domänenübergreifende Probleme auf, wenn versucht wird, auf Ressourcen aus verschiedenen Quellen zuzugreifen.

Quelle

Die Quelle bezieht sich auf den Server oder Client im Netzwerk, bei dem es sich um eine IP-Adresse, einen Domänennamen oder eine Portnummer handeln kann. Der Browser ermittelt, ob zwei URLs identisch sind, indem er die Komponenten der Quelle vergleicht, um festzustellen, ob sie domänenübergreifend sind.

Nehmen wir zum Beispiel an, wir haben die folgenden URLs:

http://www.example.com/page1
https://www.example.com/page2
http://www.example.com:8080/page3

Jede davon enthält drei Komponenten: Protokoll, Host und Portnummer. In diesem Beispiel haben die erste und dritte URL dasselbe Protokoll und denselben Host, aber ihre Portnummern sind unterschiedlich. Aufgrund der unterschiedlichen Portnummern gelten diese URLs als unterschiedliche Quellen.

Cross-Origin

Wenn ein JavaScript-Skript versucht, auf Ressourcen aus anderen Quellen zuzugreifen, blockiert der Browser die Ausführung des Skripts gemäß derselben Ursprungsrichtlinie. Browser gehen davon aus, dass dadurch bösartige Skripte daran gehindert werden, Daten zu stehlen.

Wenn beispielsweise der JavaScript-Code einer Komponente in einer Vue.js-Anwendung versucht, von einer anderen Quelle auf eine API zuzugreifen, stellt die Anwendung eine Cross-Origin-Anfrage an den Browser. Wenn domänenübergreifende Probleme nicht gelöst werden, hindern Browser Anwendungen daran, erforderliche Ressourcen aus anderen Quellen zu laden.

Lösung domänenübergreifender Probleme

Um domänenübergreifende Probleme in Vue.js-Anwendungen zu lösen, müssen Sie mehrere Aspekte berücksichtigen: domänenübergreifende Back-End-API, domänenübergreifende gepackte statische Front-End-Ressourcen usw. Schauen wir uns das an bei ihnen separat.

Backend-API domänenübergreifend

In einer Vue.js-Anwendung muss die API mit der Front-End-Anwendung interagieren. Wenn sich diese APIs in verschiedenen Domänen befinden, muss domänenübergreifend gearbeitet werden. Sie können dieses Problem mit den folgenden Methoden lösen:

1. Über den Access-Control-Allow-Origin-HTTP-Header

Geben Sie einen vertrauenswürdigen Reverse-Proxy für den Browser an, indem Sie den Access-Control-Allow-Origin-Header auf dem API-Server festlegen side Die Adresse des Servers kann das domänenübergreifende Problem lösen.

Der HTTP-Header „Access-Control-Allow-Origin“ gibt an, welchen Domänennamen der Server vertraut. Wenn dieser Header die vom Client angeforderte Adresse enthält, lässt der API-Server die Anforderung durch.

Access-Control-Allow-Origin: http://your-domain.com/

Um allen Domänen den Zugriff auf die API zu ermöglichen, können Sie einen Platzhalter verwenden:

Access-Control-Allow-Origin: *

Dieser Workaround ist einfach, aber sehr restriktiv und für die meisten Anwendungen nicht geeignet.

2. Fügen Sie einen Reverse-Proxy-Server hinzu

Um besser zu steuern, welche Anfragen den Reverse-Proxy passieren können, können Sie einen Reverse-Proxy-Server wie Nginx verwenden. Ein Reverse-Proxy-Server wird verwendet, um Daten von einem Remote-Server (z. B. einem API-Server) abzurufen und an den Client zurückzugeben.

Bei Verwendung eines Reverse-Proxys ist der API-Server nicht dem Internet ausgesetzt. Stattdessen sendet der Client eine Anfrage an den Reverse-Proxy und holt Daten von diesem ab. Ein Reverse-Proxy-Server steuert, welche Anforderungen die Anforderungspipeline durchlaufen.

Zum Beispiel können Sie für eine bestimmte API einer Vue.js-Anwendung die folgende Nginx-Serverkonfiguration festlegen:

location /api/ {
   proxy_pass http://your-api-server.com/;
   add_header 'Access-Control-Allow-Origin' 'http://your-domain.com/';
}

Die obigen Einstellungen geben an, dass alle Anfragen für den Pfad /api/* ausgeführt werden an den übergeordneten API-Server weitergeleitet werden. Wenn eine Anfrage von einem Benutzer mit dem Domänennamen your-domain.com gesendet wird, lässt der Reverse-Proxy-Server die Anfrage durch. Es werden nur Anfragen von dieser Domain zugelassen. Andere Domainnamen werden abgelehnt. /api/*路径的请求将转发到API服务器上。当从域名为your-domain.com的用户发送的请求时，反向代理服务器将允许请求通过。只有来自这个域名的请求才会被允许。其他域名将被拒绝。

前端应用部署后打包静态资源跨域

Vue.js应用程序在生产环境中会被打包为静态文件，并且会在应用程序所在的服务器上进行部署。如果你的前端应用和API部署在不同的服务器上，遇到这种情况时，我们需要做如下处理：

1. 在Vue的配置文件中添加publicPath

打包好的前端静态代码，如果没有设置publicPath，它会通过相对路径的形式引用相关资源。相对路径的导入方式会使用'./'、'../'等表示导入资源的路径标识符，而这些标识符表示的路径仅仅是相对于代码文件的。

在打包后的静态资源中，你会发现资源路径都以相对路径的方式被访问。如果你把打包后的代码直接拷贝到其他的服务器上进行访问，你会发现访问会出现问题。

为了解决这个问题，需要在打包静态文件的时候添加一个publicPath，将所有的路径改变为绝对路径。

在部署前，打开 vue.config.js

Packen statischer Ressourcen über Domänen hinweg nach der Front-End-Anwendungsbereitstellung

Vue.js-Anwendungen werden als statische Dateien in der Produktionsumgebung gepackt und auf dem Server bereitgestellt, auf dem sich die Anwendung befindet. Wenn Ihre Front-End-Anwendung und API auf verschiedenen Servern bereitgestellt werden, müssen wir in dieser Situation Folgendes tun: 🎜🎜1. Fügen Sie den mit publicPath 🎜🎜gepackten statischen Front-End-Code in die Vue-Konfigurationsdatei ein, falls nicht, legen Sie publicPath fest , das über relative Pfade auf verwandte Ressourcen verweist. Die Importmethode für relative Pfade verwendet „./“, „../“ usw., um die Pfadkennungen der importierten Ressourcen darzustellen, und die durch diese Kennungen dargestellten Pfade sind nur relativ zu den Codedateien. 🎜🎜In den gepackten statischen Ressourcen werden Sie feststellen, dass auf die Ressourcenpfade als relative Pfade zugegriffen wird. Wenn Sie den gepackten Code für den Zugriff direkt auf andere Server kopieren, werden Sie feststellen, dass es beim Zugriff Probleme gibt. 🎜🎜Um dieses Problem zu lösen, müssen Sie beim Packen statischer Dateien einen publicPath hinzufügen und alle Pfade in absolute Pfade ändern. 🎜🎜Öffnen Sie vor der Bereitstellung die Datei vue.config.js und fügen Sie eine publicPath-Adresse hinzu. Beispiel: 🎜

module.exports = {
    publicPath: 'http://cdn.example.com/vue-app'
}

🎜Diese Konfiguration weist Webpack an, beim Generieren statischer Ressourcen publicPath als benutzerdefinierte Adresse zu konfigurieren, sodass beim Zugriff auf andere Domänennamen der Code direkt über CDN-Ressourcen geladen werden kann, wodurch das Problem domänenübergreifender Ressourcenanforderungen gelöst wird. 🎜

2. CORS-Regeln festlegen

Wenn sich sowohl statische Ressourcen als auch API-Ressourcen unter dem CDN-Domänennamen befinden, müssen Sie CORS-Regeln festlegen, anstatt den Nginx-Reverse-Proxy zu verwenden, da Nginx in diesem Fall normalerweise über eine Ebene der CDN-Beschleunigung verfügt.

Legen Sie die domänenübergreifenden CORS-Regeln in der CDN-Konsole fest, aktivieren Sie den Header Access-Control-Allow-Origin, erlauben Sie dem Front-End-Code den Zugriff auf statische Ressourcen und lösen Sie das Problem des domänenübergreifenden Ressourcenzugriffs.

Fazit

Bei der Entwicklung von Vue.js-Anwendungen ist die Lösung domänenübergreifender Probleme ein wichtiger Schritt. In diesem Artikel erfahren Sie, wie Sie domänenübergreifende Probleme in Vue.js lösen. Wir benötigen unterschiedliche domänenübergreifende Lösungen für unterschiedliche Szenarien. Durch das Verständnis und die Beherrschung domänenübergreifender Probleme können wir die Leistung und Zuverlässigkeit von Vue.js-Anwendungen effektiv verbessern.

Das obige ist der detaillierte Inhalt vonVue wird online bereitgestellt, um domänenübergreifende Probleme zu lösen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!