Warum den Reverse-Proxy von Vue verwenden?

Da der Reverse-Proxy in Vue den realen Server verbergen und das domänenübergreifende Problem umgehen kann, das durch die direkte Anforderung der echten URL verursacht wird, ist es notwendig, einen Reverse-Proxy zu verwenden, um domänenübergreifende Probleme zu vermeiden Das Front-End und das Back-End. Im Szenario der getrennten Entwicklung muss das Front-End eine Verbindung zur Back-End-Schnittstelle herstellen und Anforderungen von derselben Quelle an den Reverse-Proxy-Server senden.

Die Betriebsumgebung dieses Artikels: Windows 10-System, Vue Version 2.9.6, DELL G3-Computer.

Warum den Reverse-Proxy von Vue verwenden?

Reverse-Proxy-Nutzungsszenarien

Im Szenario der getrennten Entwicklung von Front-End und Back-End gibt es einen Server im Front-End (der statische Seiten bereitstellt) und einen Server auf das Back-End (Bereitstellung von Schnittstellen)

Dies Wenn das Front-End eine Verbindung zur Back-End-Schnittstelle herstellen muss, treten domänenübergreifende Probleme auf

Wenn in der Veröffentlichungsumgebung domänenübergreifende Probleme auftreten, verwenden Sie nginx

Wenn sich die Front-End- und Back-End-Codes auf demselben Server befinden, gibt es keine domänenübergreifenden Probleme.

Domänenübergreifende Lösung

jsonp (Front-End-Lösung)

CORS (Back-End-Lösung )?

Indem Anfragen gefälscht werden, um HTTP-Anfragen vom selben Ursprung zu stellen, und die Anfragen dann vom selben Ursprung an den Reverse-Proxy-Server gesendet werden. Fordern Sie die echte URL vom Proxy-Server an und umgehen Sie so das domänenübergreifende Problem, das durch die direkte Anfrage verursacht wird echte URL. Konfiguration des Reverse-Proxy /api in Axios-Zugriffsadresse auf Ziel + /api:

(z. B.: http:localhost:9000/api/goods-Konvertierung Erstellen Sie einen virtuellen Server für http://localhost:80/api/goods)                                                                    using                 using using  - . Tutorial》】

Das obige ist der detaillierte Inhalt vonWarum den Reverse-Proxy von Vue verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!