3
votes

Le proxy devServer dans la configuration génère 404

J'ai ceci dans src/vue.config.js

  axios.get('/api/parts')
    .then(result => commit('updateParts', result.data))
    .catch(console.error);

et j'appelle l'API avec

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8081',
        changeOrigin: true,
      },
    },
  },
};

javascript webpack api vue.js

9 commentaires

Comment vos routes backend sont-elles structurées? Votre backend attend-il le / api comme préfixe? Sinon, essayez pathRewrite: {'^ / api': ''} comme option supplémentaire

@FrankProvost J'ai essayé d'ajouter pathRewrite mais cela n'a fait aucune différence (même après le redémarrage du serveur). Voulez-vous dire les itinéraires pour l'API ou pour l'application Web?

Je parle des itinéraires pour l'API. Quelle URL ouvrez-vous dans votre navigateur pour voir le résultat de l'API? localhost: 8081 / api / parts ou sans le / api?

@FrankProvost c'est avec le / api

Avez-vous essayé de définir la cible comme cible: " localhost: 8081 / api "?

@FrankProvost Oui, j'obtiens le même résultat. C'est comme si l'application ignorait complètement le proxy (il n'y a aucune trace de tentative de demande à 8081 n'importe où (

Quelle version de vue-cli avez-vous utilisée pour générer le projet? Êtes-vous sûr que votre façon de modifier la configuration correspond à la version que vous avez installée?

@FrankProvost vue --version me donne 3.3.0 - savez-vous où je peux vérifier si j'utilise la bonne méthode?

Je pense que j'ai eu le même problème en passant par le même tutoriel sur pluralsight! vue.js Fundamentals comme coincé avec la même erreur. Mon problème semblait être que le serveur avait changé de port après l'arrêt et le démarrage! était donc le test sur le port 8080 au lieu du nouveau port 8082. très étrange. Vérifier cela et accéder au nouvel emplacement de l'application sur le nouveau port, puis cela fonctionne

3 Réponses :

6
votes

Votre vue.config.js n'est pas censé être dans le dossier src. Il doit être à la racine de votre projet. Déplacez simplement le fichier.

La référence de configuration du serveur peut être trouvée ici: https: //cli.vuejs. org / config / # devserver-proxy mais il semble que vous le faites correctement. Le fichier est juste dans le mauvais dossier.

2 commentaires

OMG. cela m'a sauvé. je continue d'être pointé vers un autre port tout en modifiant toutes les choses que je peux modifier afin de faire fonctionner mon axious !! Merci!

heureux d'avoir pu aider :)

0
votes

J'ai eu le même problème après avoir essayé quelques combinaisons et j'ai finalement compris.

J'utilise Axios et mon application fonctionne sur le port 8080

axios.defaults.baseURL = 'http: // localhost: 8080 / api /'

vue.config.js

this.axios.get("users")
   .then(response => {
    this.items = response.data.data;
    this.isLoading = false;
})

module.exports = {
    devServer: {
      proxy: 'https://reqres.in'
    }
}

Onglet Réseau du navigateur:

0 commentaires

0
votes

ce n'est pas correct, si vous utilisez un proxy, votre adresse distante doit être la même que l'url et le port de la requête, donc votre vue.config.js doit être édité comme ci-dessous:

proxy: {
          '/api': {
              target: 'http://localhost:8080',
              changeOrigin: true,
              pathRewrite: { '^/api': '/'}
          }
      }

ou vous pouvez utiliser un attribut de réécriture comme celui-ci:

proxy: {
          '/api': {
              target: 'http://localhost:8080',
              changeOrigin: true
          }

la différence est la vraie requête, top sera http: // localhost: 8080 / api / ..., la réécriture sera http: // localhost: 8080 / ...

1 commentaires

Bienvenue dans StackOverflow Xiwei Huang :)