Lösung für das Problem des domänenübergreifenden Zugriffs in Vue

Bei der Frontend-Entwicklung stoßen wir häufig auf das Problem des domänenübergreifenden Zugriffs. Als weit verbreitetes Front-End-Framework stößt Vue häufig auf dieses Problem. In diesem Artikel stellen wir domänenübergreifende Zugriffsprobleme in Vue und deren Lösungen vor.

Was ist domänenübergreifender Zugriff?

Einfach ausgedrückt bezieht sich domänenübergreifender Zugriff darauf, dass eine Webseite in einer Domäne auf Ressourcen in einer anderen Domäne zugreift. Wenn Sie beispielsweise Ressourcen unter dem Domänennamen http://www.example2.com von einer Seite unter dem Domänennamen http://www.example.com anfordern, erfolgt ein domänenübergreifender Zugriff.

Probleme beim domänenübergreifenden Zugriff in Vue

Wenn wir Vue zum Senden von Ajax-Anfragen verwenden und sich die angeforderte URL vom Domänennamen der aktuellen Seite unterscheidet, treten domänenübergreifende Zugriffsprobleme auf. In diesem Fall sendet der Browser eine OPTIONS-Anfrage an den Server, um den Server zu fragen, ob er den domänenübergreifenden Zugriff unterstützt. Nur wenn der Server einen Antwortheader zurückgibt, der einen domänenübergreifenden Zugriff ermöglicht, kann die Ajax-Anfrage normal abgeschlossen werden.

Lösung

Es gibt mehrere Möglichkeiten, das Problem des domänenübergreifenden Zugriffs in Vue zu lösen.

1. Proxy verwenden

Vue-cli bietet eine Möglichkeit, den domänenübergreifenden Zugriff durch die Konfiguration eines Proxys zu lösen. Wir können einen domänenübergreifenden Zugriff erreichen, indem wir den Proxy in der Datei index.js im Konfigurationsverzeichnis konfigurieren.

Die spezifischen Schritte sind wie folgt:

Fügen Sie das ProxyTable-Attribut zum Dev-Objekt in der Datei index.js hinzu.

proxyTable: {
  // 将所有以/api开头的请求代理到http://localhost:3000上
  '/api': {
    target: 'http://localhost:3000',
    changeOrigin: true,
    pathRewrite: {
      '^/api': ''
    }
  }
}

Wenn wir zu diesem Zeitpunkt eine URL anfordern, die mit /api beginnt, wird diese an http://localhost:3000 weitergeleitet. Das Attribut „changeOrigin“ ist auf „true“ gesetzt, um anzugeben, dass das Ursprungsfeld im Anforderungsheader geändert werden muss, wenn eine domänenübergreifende Anforderung gestellt wird. Das Attribut „pathRewrite“ gibt an, dass /api im Anforderungspfad durch eine leere Zeichenfolge ersetzt wird.

2.JSONP (nur für GET-Anfragen)

JSONP ist eine Möglichkeit, domänenübergreifende Anfragen zu implementieren, indem Skript-Tags dynamisch auf der Seite hinzugefügt werden. Wir können das Problem des domänenübergreifenden Zugriffs lösen, indem wir JSONP in Vue verwenden.

Die spezifischen Schritte sind wie folgt:

Installieren Sie die JSONP-Bibliothek

npm install jsonp --save

Verwenden Sie JSONP auf der Seite

import jsonp from 'jsonp'

jsonp(url, options, (err, data) => {
  if (!err) {
    // 处理数据
  }
})

URL stellt die angeforderte URL dar, Optionen stellen die Parameter der Anforderung dar und die Daten in der Rückruffunktion (err, data) sind die zurückgegebenen Daten.

3.CORS

CORS ist ein vom W3C entwickelter Standard, der es Servern ermöglicht, zu entscheiden, ob domänenübergreifender Zugriff zugelassen werden soll. Wir können auf der Serverseite einige Konfigurationen vornehmen, damit der Server CORS unterstützt. Die Konfigurationsmethode variiert von Server zu Server, daher werde ich hier nicht auf Details eingehen.

Bei Verwendung von CORS müssen wir das withCredentials-Attribut in Vue verwenden, um einen domänenübergreifenden Zugriff zu erreichen. Die spezifischen Schritte sind wie folgt:

Aktivieren Sie das withCredentials-Attribut in Vue.

Vue.http.options.credentials = true

Das withCredentials-Attribut gibt an, ob domänenübergreifende Anfragen zum Senden von Benutzeranmeldeinformationen wie Cookies zugelassen werden sollen.

Fazit

Es gibt viele Möglichkeiten, domänenübergreifende Zugriffsprobleme in Vue zu lösen, aber jede Methode hat ihre Vor- und Nachteile. Die Verwendung der Proxy-Methode kann das Problem des domänenübergreifenden Zugriffs in Vue gut lösen. Bei Verwendung der CORS-Methode ist eine gewisse Konfiguration auf der Serverseite erforderlich. Wir sollten die geeignete Lösung basierend auf unserer tatsächlichen Situation wählen.

Das obige ist der detaillierte Inhalt vonLösung für das Problem des domänenübergreifenden Zugriffs in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!