web-dev-qa-db-fra.com

Requêtes proxy vers un serveur backend séparé avec vue-cli

J'utilise vue-cliwebpack-simple modèle pour générer mes projets, et j'aimerais envoyer des requêtes par proxy à un serveur principal distinct. Comment y parvenir facilement?

webpackvue.jswebpack-dev-server
22
Mahmud Adam

Si vous utilisez le modèle webpack avec vue-cli, Vous pouvez trouver les informations requises dans ce document de référence:

http://vuejs-templates.github.io/webpack/proxy.html

Ou au lieu de modifier votre modèle maintenant, vous pouvez copier la configuration appropriée du modèle webpack dans votre modèle local webpack-simple.

EDIT: plus d'informations sur ma configuration locale

Voici ce que j'ai dans mon config/index.js Sous module.exports:

dev: {
    env: require('./dev.env'),
    port: 4200,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
        '/api': {
            target: 'http://localhost:8080',
            changeOrigin: true
        },
        '/images': {
            target: 'http://localhost:8080',
            changeOrigin: true
        },
        // and so on...

La configuration ci-dessus exécute mon vue-cli Sur le port 4200 et j'exécute mon serveur sur le port 8080.

EDIT: Informations corrigées sur CORS après les commentaires # 4 et # 5

Remarque:

  • L'option changeOrigin dans dev.proxyTable (Dans la configuration du webpack) garantit que vous n'avez pas besoin de servir les en-têtes CORS sur les réponses de l'API de votre serveur.
  • Si vous décidez d'omettre changeOrigin pour une raison quelconque, vous devez vous assurer que votre API de serveur inclut Access-Control-Allow-Origin: * (Ou équivalent) dans ses en-têtes de réponse.

Références:

  1. https://stackoverflow.com/a/36662307/654825
  2. https://github.com/chimurai/http-proxy-middleware
21
Mani

Dans @ vue/cli 3.x:

  • Créer un vue.config.js fichier dans le dossier root de votre projet, si vous n'en avez pas déjà un.
  • Avoir son contenu comme suit:
// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      "/gists": {
        target: "https://api.github.com",
        secure: false
      }
    }
  }
};

Maintenant, tout appel à (en supposant que votre serveur de développement est à localhost:8080) http://localhost:8080/gists sera redirigé vers https://api.github.com/gists.


Un autre exemple: procuration de tous les appels

Supposons que vous disposiez d'un serveur principal local qui est généralement déployé sur localhost:5000 et vous souhaitez rediriger tous les appels vers /api/anything à elle. Utilisation:

// vue.config.js
module.exports = {
    devServer: {
        proxy: {
            "/api/*": {
                target: "http://localhost:5000",
                secure: false
            }
        }
    }
};
36
acdcjunior