So verwenden Sie Nginx zur Verwaltung einer domänenübergreifenden Vue-Entwicklungsumgebung

1. Nachfrage

Der lokale Testdomänenname ist derselbe wie der Onlinedomänenname, um eine korrekte Cookie-Zustellung und SSO-Tests sicherzustellen.

Hinweis: Nach der SSO-Anmeldung werden die relevanten Cookies zum Domänennamen der vierten Ebene hinzugefügt. Daher müssen der lokale Testdomänenname und der Domänenname der Online-Schnittstelle identisch sein.

2. Lösung

Konfigurieren Sie die Host-Datei so, dass der Online-Domänenname auf Localhost verweist:

127.0.0.1 product.xxx.xxx.com

Konfigurieren Sie Nginx für die entsprechende Weiterleitung:

Server {
  hören Sie 80;
  hören [::]:80;
  Servername ${product.xxx.xxx.com};

  Standort /API {
    Proxy-Passwort https://${ip.ip.ip.ip};
    Proxy_Set_Header Host $host;
  }

  Standort / {
    Proxy-Passwort http://localhost:8080;
    Proxy_Set_Header Host $host;
  }  
}

Konfigurieren Sie vue.config.js, um den Fehler „Ungültiger Host-Header“ zu vermeiden:

{
  devServer: {
    disableHostCheck: true
  }
}

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.