Detaillierte Erläuterung, wie Vue-cli domänenübergreifende Anfragen implementiert

In diesem Artikel wird hauptsächlich detailliert beschrieben, wie domänenübergreifende Anfragen für von Vue-cli erstellte Projekte gestellt werden. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Editor und werfen wir einen Blick darauf

Problembeschreibung:

Bei Projekten, die mit Vue-cli erstellt wurden, lautet die Entwicklungsadresse localhost:8023 und muss unter aufgerufen werden localhost:9000 Analyse des Grundes für die Schnittstelle

:

Der Zugriff zwischen verschiedenen Domainnamen erfordert domänenübergreifend, um korrekte Anfragen zu stellen. Es gibt viele domänenübergreifende Methoden, die normalerweise eine Hintergrundkonfiguration erfordern

Von Vue-cli erstellte Projekte können jedoch direkt den Node.js-Proxyserver verwenden, um domänenübergreifende Anforderungen zu implementieren

Lösung:

Die Schnittstellenadresse war ursprünglich /form/save, aber um mit der Proxy-Adresse übereinzustimmen, fügen Sie vorab ein /api hinzu

Wenn Sie Axios verwenden, können Sie eine Basis-URL global konfigurieren, sodass Sie die URLs nicht einzeln ändern müssen 🎜>Konfigurationselemente in der Entwicklung von config>index.js Proxy hinzufügenTabelle:

axios.defaults.baseURL = '/api'

wobei „/api“ das ist passendes Element und Ziel ist die angeforderte Adresse

Da der Ajax-URL das Präfix „/api“ hinzugefügt wird und die ursprüngliche Schnittstelle dieses Präfix nicht hat

, müssen Sie es also neu schreiben Adresse durch pathRewrite und konvertieren Sie das Präfix „/api“ in „/“

  proxyTable: {
   '/api': {
    target: 'http://127.0.0.1:9000/',
    changeOrigin: true,
    pathRewrite: {
     '^/api': '/'
    }
   }
  },

Wenn Ihre Schnittstellenadresse ein gemeinsames Präfix wie „/api“ hat, können Sie pathRewrite löschen

[Verwandte Empfehlungen]

1.

Javascript ist ein kostenloses Video-Tutorial

2

Detailliertes Beispiel für ein EasyUI-Dropdown-Listen-Klickereignis

3.

Beispiel-Tutorial einer domänenübergreifenden Webpack-Entwicklungsumgebung

4

Einführung in die Methode zum Löschen von Elementen in einem Array mit JS

5 🎜>Tutorial zur Verwendung des koa2-Frameworks in nodejs6

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung, wie Vue-cli domänenübergreifende Anfragen implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!