web-dev-qa-db-fra.com

Comment obtenir axios baseUrl dans Nuxt?

J'ai un module axios dans mon projet Nuxt.js.
J'ai également configuré mon baseUrl (pour l'API) dans localhost:4040/api pendant que mon client fonctionne sur le port 3000.
Lorsque je récupère des données d'image dans l'API, il renvoie un chemin relatif vers le serveur api qui est comme '/upload/1.png'
{ "src":"/upload/1.png" }

Donc, j'ai besoin d'obtenir l'axios baseUrl et de le concaténer pour faire le chemin complet vers l'image.
Existe-t-il un autre moyen de procéder que de coder en dur?

vue.jsaxiosnuxt.js
6
Terry Djony

Si dans nuxt.config.js vous avez défini:

axios: {
  baseURL:"localhost:4040/api/"
}

Tout ce que vous devez faire pour l'image est de la pointer comme suit:

:src="`${$axios.defaults.baseURL}upload/1.png`"
9
Begueradj

Vous pouvez accéder à la configuration axios comme ceci pour obtenir l'URL de votre base api:

this.$axios.defaults.baseURL
6
jibe

J'avais un problème similaire. Mon étape de résolution est la suivante: Supprimer le dossier .nuxt + supprimer le cache dans le navigateur Changer

  axios: {
     baseURL: 'http: // localhost: 8080/api'
   }

Cela fonctionne comme prévu. Avant cela, j'ai essayé de nombreuses façons, comme les tutoriels communautaires, mais pas efficace.

1
Tran Hoang Hiep

Si quelqu'un se demande comment rendre un domaine axios indépendant du domaineURL:

Voici comment cela peut être réalisé simplement:

axios: {
  baseURL: '/'
}

Cela fonctionnera sur localhost:3000/api ainsi que le any-domain.com/api

0
Erick Aky

Si quelqu'un a l'intention d'appeler axios, appelez-le via dispatch store/index.js

   export const actions = {
     // nuxt server Init only works on store/index.js
     async nuxtServerInit ({dispatch}) {
         let response = await dispatch ('member / list', {page: 1});
         console.log (response);
       }
}

fichier de module member.js

   async list ({commit}, payload) {
         return await this. $ axios. $ post ('/ user / list', payload) .then ((response) => {
             commit ('fetchSuccess', response);
             return response;
             })
             .catch (error => {
                 return error.response.data;
             });
     },

fichier nuxt.config.js config avec axios api

 axios: {
    baseURL: 'http://localhost:9020/api'
  },

Désolé si la réponse n'est pas appropriée mais quelqu'un devra espérer que cela les explique

0
Tran Hoang Hiep

vous pouvez définir l'URL de base pour axios

axios.defaults.baseURL = ' https://api.example.com/ ';

la prochaine fois, cette URL sera ajoutée avec le chemin d'accès requis pour appeler l'api

pour plus de détails, vous pouvez voir le lien ci-dessous

https://github.com/axios/axios

0
Md Mahamudul Hasan