So konfigurieren Sie den Schnittstellen-Proxy mit vue-cli

In diesem Artikel wird hauptsächlich die Proxy-Konfiguration der Vue-CLI-Schnittstelle vorgestellt. Jetzt werde ich sie mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Editor und werfen wir einen Blick darauf.

Dieser Artikel stellt die Proxy-Konfiguration der Vue-CLI-Schnittstelle vor und teilt sie mit allen. Die Details sind wie folgt:

Einige Schüler haben Fragen dazu Konfigurieren Sie den Schnittstellen-Proxy, wenn Sie ihn konfigurieren. Warum ist die Schnittstelle nach Erfolg immer noch blockiert, aber die Regeln für den Schnittstellenzugriff sind nicht klar?

Im Folgenden werden lokale Tests als Kastanie verwendet für Sie

Einige grundlegende Vorgänge werden hier nicht vorgestellt

Suchen Sie index.js im vue-cli-Konfigurationsordner. Dies ist die Datei, die die Schnittstellenregeln konfiguriert Einige Schüler sind es gewohnt, die Originaldatei direkt zu ändern, es wird jedoch empfohlen, eine neue Datei zu verwenden:

module.exports = {
  proxyList: {
    '/api': {
      target: 'http://localhost:3000',  （这里是代理接口的位置）
      changeOrigin: true,（允许跨域，如果这不写，调用接口接口时会有跨域错误说缺少请求头）
      pathRewrite: {'^/api': '' } （路由规则下面详细介绍）
    }
  }
}

******Routing-Regeln****** *

Nachdem der obige Code ausgeführt wurde, bedeutet dies, dass, solange Sie „/api“ in der Schnittstelle sehen, diese automatisch zu unserer Einstellungsadresse wird, dann können wir den Schreibstandard der Schnittstelle beim Einrichten standardisieren. Dieses Attribut pathRewrite wird verwendet. Path rewrite {'^/api': '' } bezieht sich darauf, wie die Route aussehen soll /good‘), dann sehen wir den Zugriff auf /good auf der Serverseite. Wenn auf der Serverseite zu diesem Zeitpunkt keine entsprechende Routenübereinstimmung vorliegt, wird auf dem Client-Server ein Fehler angezeigt. Die Portnummer ist immer noch der Port Wenn wir die Nummer des Clients festlegen, haben viele Schüler die Illusion, dass dies nicht funktioniert. Wenn wir {'^/api': '/api' } festlegen, sehen wir den Zugriff auf die Schnittstelle /api/goods dass /api nicht nur automatisch in eine Proxy-Adresse aufgelöst wird, sondern auch serverseitig als Route angezeigt wird.

Achten Sie beim Festlegen von Routing-Regeln auch auf das Trennzeichen. Manche Schüler schreiben das Ziel gerne so: „http://localhost:3000/“. Stellen Sie fest, dass das Routing nicht korrekt ist. Sie müssen beim Benennen der Routing-Regeln auch „/“ hinzufügen. Andernfalls werden Sie feststellen, dass beim Anfordern der Schnittstelle ein zusätzliches Trennzeichen vorhanden ist. wie zum Beispiel: '/api//goods'.

Führen Sie nach der Einrichtung „proxyConfig.js“ in „index.js“ ein, legen Sie „proxyTable“ fest und schließen Sie die Einstellung ab für alle. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Informationen zur Implementierung des Versandmechanismus zwischen übergeordneten und untergeordneten Vue2.0-Komponenten (ausführliches Tutorial)

Verwendung React-Router Verwenden Sie den Verlauf, um das Routing zu steuern (ausführliches Tutorial)

So verwenden Sie jqprint zum Drucken von Seiteninhalten

Verwenden Sie js, um WeChat zu implementieren Rufen Sie Alipay auf, um rote Umschläge zu erhalten (ausführliches Tutorial)

Wie implementiert man die Modularisierung statischer Webseiten mit Gulp?

So integrieren Sie Vux in vue.js, um Pull-Up-Laden und Pull-Down-Aktualisierung zu erreichen

Das obige ist der detaillierte Inhalt vonSo konfigurieren Sie den Schnittstellen-Proxy mit vue-cli. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!