Bei der Entwicklung von vue-cli Lösungen für domänenübergreifendes Ajax (dringend empfohlen)

Im Folgenden werde ich einen Artikel über die domänenübergreifende Ajax-Lösung bei der Entwicklung von vue-cli veröffentlichen. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich sein wird.

Zweck: Wenn Sie bei der Entwicklung eines mit vue-cli erstellten Projekts auf die Backend-Schnittstelle zugreifen möchten, um Daten abzurufen, treten domänenübergreifende Probleme auf.

Konfigurieren Sie Folgendes in config/index.js

[Das heißt, wenn Sie eine Ajax-Anfrage stellen, jede Adresse, die mit /api beginnt Die Anforderungsadresse wird in die Zieladresse geparst und das Ziel ist die gewünschte Back-End-Schnittstellenadresse]

proxyTable: { 
‘/api': { 
target: ‘https://188.188.18.8‘, 
changeOrigin: true, 
pathRewrite: { 
‘^/api': ” 
} 
} 
}
“`

Beispiel für einen Aufruf einer Vue-Ressource

this.$http.get('/api/v4/user/login', [options]).then(function(response){
  // 响应成功回调
}, function(response){
  // 响应错误回调
});

Axios-Aufruf Beispiel

 axios({
  method: 'get',
  headers: {'Accept': '*/*'},
  url: '/api/v4/user/login',
  data: options
 })
 .then(function (response) {
  console.log(response.data)
 })
 .catch(function (error) {
  console.log(error)
 })

Erklären Sie das Prinzip:

In der Konfiguration: Ziel: 'https://188.188.18.8'

Im obigen Vue-Ressourcen-Beispiel lautet der erste Parameter: /api/v4/user/login

wird vom lokalen Server automatisch als https://188.188.18.8/v4/ geparst. user/login Und das ist die offizielle Adresse, die wir brauchen.

Domänenübergreifendes Prinzip (lokale Dateien geben vor, auf dem Remote-Server zu sein):

Öffnen Sie die Seite über den Browser, wenn eine Anfrage gestellt wird: die Adresse des lokalen Servers (normalerweise localhost :8080 oder 127.0.0.1 :8080) empfängt diese Anfrage und stellt dann fest, dass die Anfrageadresse die Zeichenfolge /api enthält. Anschließend ändert der lokale Server die Anfrageadresse in https://188.188.18.8/v4/ (Konfigurationsadresse). ) + user/login (Die detaillierte Adresse der aufrufenden Methode).

Gleichzeitig ändert sich die Adresse des lokalen Servers von localhost:8080 zu https://188.188.18.8/v4/. Das Ergebnis ist:

Unsere lokalen Dateien werden Es wird davon ausgegangen, dass es an der Zieladresse platziert wird (https://188.188.18.8/v4/). Wenn auf dem Server die Datei auf dem aktuellen Server etwas anderes vom Server anfordert, handelt es sich natürlich nicht um eine domänenübergreifende Datei.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Implementierung von AjaxDrag-and-Drop-Datei-Upload (mit Code)

Implementierung durch Ajax Methode zum dynamischen Laden von Liniendiagrammen (grafisches Tutorial)

jquery ajaxImplementierung der Datei-Upload-Funktion (mit Code)

Das obige ist der detaillierte Inhalt vonBei der Entwicklung von vue-cli Lösungen für domänenübergreifendes Ajax (dringend empfohlen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!