Environnement Docker Module Nuxt axios pour définir baseURL

Problème Seul axios ne fonctionne pas après le rendu de la page ...

Tout d'abord, en utilisant docker-compose, j'ai créé un environnement de développement nuxt (frontend) et un environnement de serveur API (application) de go avec une image de nœud. Vous devriez maintenant être en mesure de résoudre l'adresse du conteneur avec l'application à partir du conteneur frontal.

Et implémentez axios en SSR: véritable environnement,

J'ai défini la baseURL, mais j'ai remarqué que la baseURL a changé en localhost: 3000 (par défaut). J'ai été troublé par le phénomène selon lequel $ store.dispatch écrit dans des méthodes après le rendu de page ne fonctionnait pas même si le processus appelé avant le rendu de page (écrit par acyn fetch ()) fonctionnait correctement.

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

methods: { 
    axiosFunc() {  //Cela ne fonctionne pas erreur 404
        const payload = {....}
        this.$store.dispatch('.....', payload)
    }
},
async fetch({store}) { //Déplacez-vous ici
    const payload = {....}
    await store.dispatch('.....', payload)
}

Solution

Bien que la cause puisse être prédite dans une certaine mesure, il semble qu'elle ait changé en raison de la relation de communication avec le serveur avant et après le rendu de la page. Et j'ai trouvé le blog ci-dessous.

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

Étant donné que le côté extraction qui exécute axios dans SSR (conteneur) s'exécute sur baseURL et que la fonction définie dans les méthodes est appelée côté navigateur, il était nécessaire de définir browserBaseURL et de changer le point de terminaison.

De plus, il semble que le navigateur n'ait pas la possibilité de retracer l'adresse par nom de conteneur.

net::ERR_NAME_NOT_RESOLVED

Mettez chaque conteneur dans un réseau commun,

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

J'ai pu le déplacer en toute sécurité en précisant.