Proxy-Weiterleitung wird in Vue nicht verwendet

Bei der Entwicklung mit Vue müssen wir häufig mit dem Backend-API-Server interagieren. Um CORS-Probleme (Cross-Origin Resource Sharing) zu vermeiden, wird in der Vue-Konfiguration normalerweise die Proxy-Weiterleitung zum Weiterleiten von Anforderungen verwendet. Manchmal müssen wir jedoch direkt mit dem API-Server interagieren, ohne einen Proxy zu verwenden. Was sollten wir in diesem Fall tun?

1. Verwenden Sie eine Drittanbieter-Bibliothek

Wenn Sie die Standard-Proxy-Konfiguration von VueCLI nicht verwenden möchten, können Sie für Anfragen eine Drittanbieter-Bibliothek verwenden. Beispielsweise können wir Axios verwenden, um direkt mit dem API-Server zu interagieren, indem wir bei Anfragen Anforderungsheader und zugehörige Parameter festlegen.

Zuerst müssen wir Axios im Vue-Projekt installieren:

npm install axios --save

In der Komponente, die eine Anfrage stellen muss, können wir Axios wie folgt verwenden:

import axios from 'axios'

axios.get('/api/getUserInfo', {
  headers: {
    'Content-Type': 'application/json'
  }
}).then(res => {
  console.log(res)
})

Im Code verwenden wir zum Erstellen die get-Methode von Axios die Anforderung und stellen Sie gleichzeitig die Anforderung ein. Der Header-ContentType ist application/json. Auf diese Weise können Sie direkt eine Anfrage an den API-Server initiieren und Daten abrufen.

2. Verwendung des Webpack-Plugins

Wir können das Webpack-Plugin auch verwenden, um weitergeleitete Anfragen ohne Verwendung eines Proxys umzusetzen. Die spezifische Implementierung besteht darin, einen lokalen Server einzurichten, der den Proxyserver ersetzt, indem er mit Express- und http-Proxy-Middleware-Plug-Ins zusammenarbeitet, um Zugriff auf den API-Server zu erhalten.

Zuerst müssen wir die entsprechenden Plug-Ins installieren:

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

Erstellen Sie eine neue server.js-Datei im Projektstammverzeichnis, um den lokalen Server zu starten:

const express = require('express')
const proxy = require('http-proxy-middleware')

const app = express()

app.use('/api', proxy({
  target: 'http://api.server.com',
  changeOrigin: true,
  pathRewrite: {
    '^/api': ''
  }
}))

app.listen(3000, () => {
  console.log('Server is running at localhost:3000')
})

Hier verwenden wir http-proxy-middleware, um die API zu implementieren server Weiterleiten und Ziel festlegen, um den Zielserver anzugeben.

Fügen Sie dann einen Skriptbefehl in die Datei package.json ein, um den lokalen Server zu starten:

"scripts": {
  "dev-server": "node server.js"
}

Setzen Sie schließlich die Basis-URL in der Axios-Konfiguration im Vue-Projekt auf http://localhost:3000/api Anfrage an den API-Server:

import axios from 'axios'

axios.defaults.baseURL = 'http://localhost:3000/api'

axios.get('/getUserInfo').then(res => {
  console.log(res)
})

Auf diese Weise können wir direkt eine Anfrage an den API-Server über die Adresse http://localhost:3000/api/getUserInfo initiieren.

Zusammenfassung

Die oben genannten sind zwei Methoden zur Verwendung von Vue für die Entwicklung ohne Proxy-Weiterleitung. Während die Verwendung der Proxy-Weiterleitung eine effektive Möglichkeit zur Lösung von CORS darstellt, ist es in manchen Fällen bequemer, direkt mit dem API-Server zu interagieren. Ich hoffe, dieser Artikel ist hilfreich für Sie.

Das obige ist der detaillierte Inhalt vonProxy-Weiterleitung wird in Vue nicht verwendet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!