So lösen Sie den domänenübergreifenden Vue2.0-Proxy

In dem Entwicklungsmodell, in dem Front- und Back-End getrennt sind, erhält das Front-End Daten normalerweise durch Anfordern der Hintergrundschnittstelle über Ajax. Aufgrund der Einschränkung der Same-Origin-Richtlinie kann das Front-End jedoch nur Schnittstellen unter demselben Domänennamen anfordern und keine Schnittstellen unter anderen Domänennamen direkt anfordern. Dies ist das sogenannte Cross-Domain-Problem.

Um domänenübergreifende Probleme zu lösen, können wir domänenübergreifende Proxy-Technologie verwenden. In Vue2.0 kann ein domänenübergreifender Proxy durch Konfigurieren der ProxyTable des Webpacks implementiert werden. Im Folgenden stellen wir Ihnen im Detail vor, wie Sie den domänenübergreifenden Proxy in Vue2.0 konfigurieren.

1. Install http-proxy-middleware

http-proxy-middleware ist eine Node.js-Proxy-Middleware, die Proxy-Anfragen an das Ziel weiterleiten kann Server zur Umsetzung domänenübergreifender Anfragen. Wir müssen zuerst http-proxy-middleware installieren:

npm install http-proxy-middleware --save-dev

2. ProxyTable konfigurieren

In Vue2.0-Projekten ist normalerweise die Webpack-Konfigurationsdatei Es befindet sich in der Datei config/index.js im Stammverzeichnis des Projekts. Wir müssen die Proxytabelle in dieser Datei konfigurieren:

dev: {
  // ...
  proxyTable: {
    '/api': {
      target: 'http://127.0.0.1:3000', // 目标服务器地址
      changeOrigin: true,  // 是否改变请求源
      pathRewrite: {
        '^/api': ''  // 路径重写
      }
    }
  }
},

Im obigen Code konfigurieren wir eine Proxyregel, um Anfragen, die mit /api beginnen, an den angegebenen Zielserver weiterzuleiten. Wenn die angeforderte URL /api/user lautet, wird sie an die Schnittstelle http://127.0.0.1:3000/user weitergeleitet. Mit „changeOrigin“ wird das Hostfeld im Anforderungsheader festgelegt, mit „pathRewrite“ wird der Pfad neu geschrieben und das Präfix „/api“ entfernt.

3. package.json konfigurieren

In der package.json-Datei müssen wir den folgenden Code hinzufügen:

"scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  "start": "npm run dev"
},

#🎜 🎜# Dadurch können wir den Entwicklungsserver mit dem Befehl npm run dev starten und die Proxy-Regeln werden automatisch geladen und verwendet.

Proxys in Vue-Dateien verwenden

In Vue-Einzeldateikomponenten, die domänenübergreifende Anforderungen verwenden müssen, können wir Proxy-Regeln direkt verwenden Verwenden Sie das in definierte /api-Präfix, um Daten anzufordern, wie unten gezeigt:

// 请求当前登录用户信息
axios.get('/api/user').then(response => {
  this.user = response.data
}).catch(error => {
  console.log(error)
})

Das Obige sind die detaillierten Schritte zum Konfigurieren des domänenübergreifenden Proxys in Vue2.0. Durch die Verwendung von Proxy-Regeln können wir erfolgreich Schnittstellen unter anderen Domänennamen in der Entwicklungsumgebung anfordern, was die gemeinsame Entwicklung von Front- und Back-Ends erleichtert.

Das obige ist der detaillierte Inhalt vonSo lösen Sie den domänenübergreifenden Vue2.0-Proxy. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!