Docker-Umgebung Nuxt-Axios-Modul zum Festlegen von baseURL

Problem Nur Axios funktionieren nach dem Rendern von Seiten nicht ...

Zuerst habe ich mit Docker-Compose eine Nuxt-Entwicklungsumgebung (Frontend) und die API-Server-Umgebung (App) von go mit einem Knoten-Image erstellt. Sie sollten nun in der Lage sein, die Adresse des Containers mit der App aus dem Frontend-Container aufzulösen.

Und Axios in SSR implementieren: echte Umgebung,

Ich habe die baseURL festgelegt, aber ich habe festgestellt, dass die baseURL in localhost geändert wurde: 3000 (Standard). Ich war beunruhigt über das Phänomen, dass $ store.dispatch, das nach dem Rendern der Seite in Methoden geschrieben wurde, nicht funktionierte, obwohl der vor dem Rendern der Seite aufgerufene Prozess (geschrieben von acyn fetch ()) korrekt funktionierte.

  axios: {
    baseURL: 'http://app:8080',
    proxy: true,
  },
  proxy: {
    '/api': '/'
  },

methods: { 
    axiosFunc() {  //Dies funktioniert nicht 404 Fehler
        const payload = {....}
        this.$store.dispatch('.....', payload)
    }
},
async fetch({store}) { //Bewegen Sie sich hierher
    const payload = {....}
    await store.dispatch('.....', payload)
}

Lösung

Obwohl die Ursache bis zu einem gewissen Grad vorhergesagt werden kann, scheint sie sich aufgrund der Kommunikationsbeziehung mit dem Server vor und nach dem Rendern der Seite geändert zu haben. Und ich habe den Blog unten gefunden.

https://rara-world.com/nuxt-docker-404-api/

Da die Abrufseite, die Axios in SSR (Container) ausführt, auf der baseURL ausgeführt wird und die in Methoden definierte Funktion auf der Browserseite aufgerufen wird, musste die browserBaseURL festgelegt und der Endpunkt gewechselt werden.

Es scheint auch, dass der Browser nicht in der Lage ist, die Adresse anhand des Containernamens zu verfolgen.

net::ERR_NAME_NOT_RESOLVED

Stellen Sie jeden Container in ein gemeinsames Netzwerk.

browserBaseURL: "http://app:8080",

Ich konnte es durch Angabe sicher bewegen.