Zwei praktische Möglichkeiten zum Aktivieren des Proxys in React

Zwei Möglichkeiten zum Aktivieren des Proxy

React verfügt nicht über gekapselten Ajax-Anforderungscode, den wir direkt verwenden können. Bei der Interaktion müssen wir den Ajax-Code selbst kapseln oder eine Ajax-Bibliothek eines Drittanbieters verwenden. Im Allgemeinen verwenden wir Axios (leichtgewichtig).

Warum brauchen wir einen Agenten?

Wenn wir beispielsweise lokal einen Server mit Port 5000 schreiben und eine Anforderung über Port 3000 stellen, tritt ein domänenübergreifendes Problem auf (die ursprüngliche Ajax-Engine von Port 3000 fängt die Antwort ab). Zu diesem Zeitpunkt kann das Problem durch die Verwendung eines Proxys gelöst werden. Der sogenannte Proxy ist ein Tool zum Übertragen von Informationen. Die Anforderung mit Port 3000 wird an den auf Port 3000 geöffneten Proxy gesendet, und der Proxy leitet sie an den Server auf Port 5000 weiter. Da der Proxy keine Ajax-Engine hat, kann er beim Antworten die Antwort empfangen und sie dann an das auf Port 3000 geöffnete Gerüst weiterleiten, wodurch das domänenübergreifende Problem gelöst wird.

Zwei Möglichkeiten zum Öffnen des Proxys in React

Methode 1

Fügen Sie der Datei package.json "proxy": "https://localhost:5000" hinzu. Danach werden Ressourcen, die auf Port 3000 nicht verfügbar sind, auf Port 5000 gefunden. Das heißt, Anfragen an Port 3000 werden an den Server an Port 5000 weitergeleitet, wenn das angeforderte Objekt jedoch bereits an Port 3000 verfügbar ist, wird es nicht an Port 5000 weitergeleitet.

Mit dieser Methode kann nur einer gefunden werden. Wenn Sie jedoch nicht nur Port 5000, sondern auch andere Portnummern finden möchten (mehrere Proxys konfigurieren), sollten Sie die folgende Methode verwenden.

Methode 2

Fügen Sie eine setupProxy-Datei in src hinzu (das React-Scaffolding findet diese Datei) und kopieren Sie den folgenden Code

Nach der Konfiguration müssen Sie /api1 zur Adresse localhost:3000 hinzufügen, an die die Anfrage zuvor gesendet wurde. Das bedeutet, dass, wenn die angeforderte Ressource auf Port 3000 nicht gefunden wird, der von api1 konfigurierte Proxy für den Zugriff auf Port 5000 verwendet wird. Wenn Sie mehrere Proxys konfigurieren möchten, trennen Sie diese durch Kommas.

changeOrigin wird verwendet, um den Wert des Host-Felds im vom Server empfangenen Antwortheader zu steuern. Wenn der Standardwert hier „false“ ist, geht der Server davon aus, dass die Anforderung von Port 3000 kommt. Wenn der Wert jedoch auf „true“ gesetzt ist, geht der Server davon aus, dass die Anforderung von Port 5000 kommt (was nicht der Fall ist). Sie müssen dies nicht schreiben, aber es ist am besten, es zu schreiben.

Der Anforderungspfad wird während pathWrite neu geschrieben. Tatsächlich wird der Proxy am Anfang über /api gefunden, aber wenn der Proxy eine Anforderung an Port 5000 stellt, muss /api entfernt werden, z. B. https://localhost:3000/api/student. Wenn api nicht entfernt wird, entspricht die Anforderungsadresse /api/students, aber tatsächlich sollte die Adresse, die wir anfordern möchten, /student sein.

const Proxy = erforderlich('http-Proxy-Middleware');
​
modul.exporte = Funktion (App) {
    app.verwenden(
        Proxy('/api1', {
            Ziel: 'http://localhost:5000',
              changeOrigin: true, // Standardwert ist false
            Pfad neu schreiben: { '^/api1': '' }
         }),
        Proxy('/api2', {
            Ziel: 'http://localhost:5001',
            changeOrigin: true, // Standardwert ist false
            Pfad neu schreiben: { '^/api2': '' }
       }),
   )
}

Zusammenfassen

Damit ist dieser Artikel über die beiden Möglichkeiten zum Aktivieren des Proxys in React abgeschlossen. Weitere Informationen zum Aktivieren des Proxys in React finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!