web-dev-qa-db-fra.com

le proxy webpack-dev-server ne fonctionne pas

Je veux proxy/v1/* à http://myserver.com , et voici mon script

 devServer: {
   historyApiFallBack: true,
   // progress: true,
   hot: true,
   inline: true,
   // https: true,
   port: 8081,
   contentBase: path.resolve(__dirname, 'public'),
   proxy: {
     '/v1/*': {
       target: 'http://api.in.uprintf.com',
       secure: false
         // changeOrigin: true
     }
   }
 },

mais ça ne marche pas,  enter image description here

webpackhttp-proxywebpack-dev-server
9
Arthur Xu

Mise à jour: Merci à @chimurai, il est important de régler changeOrigin: true pour que cela fonctionne.

Souswebpack-dev-server passe toute la configuration du proxy à http-proxy-middleware, à partir de documentation . Il est clair que le cas d'utilisation souhaité est réellement réalisé avec le chemin /v1/**:

devServer: {
   historyApiFallBack: true,
   // progress: true,
   hot: true,
   inline: true,
   // https: true,
   port: 8081,
   contentBase: path.resolve(__dirname, 'public'),
   proxy: {
     '/v1/**': {
       target: 'http://api.in.uprintf.com',
       secure: false,
       changeOrigin: true
     }
   }
 },
15
Yevgen Safronov

Assurez-vous que l'URL et le port de votre demande correspondent à ceux sur lesquels votre serveur webpack-dev-server est exécuté. Ainsi, si votre API est située à http://localhost:5000 et que votre serveur de développement s'exécute sur http://localhost:8080, assurez-vous que toutes vos demandes sont adressées à http://localhost:8080. Il est préférable de faire vos demandes à localhost:8080/api (pour éviter tout conflit avec les routes de l'application) et d'utiliser le chemin rewrite pour supprimer le fichier/api. 

Exemple:

Webpack devserver proxy config:

proxy: {
    '/api': {
        target: 'http://localhost:5000',
        pathRewrite: { '^/api': '' },
    },
}

Le serveur de développement Webpack s'exécutant sur:

http://localhost:8080

Point de terminaison de l'API souhaité:

http://localhost:5000/items

Dans votre application, faites la demande à:

http://localhost:8080/api/items.

Ce devrait fonctionne. Il me semble que tous les problèmes ci-dessus découlent de la demande de l'URL et du port de l'API plutôt que de l'URL et du port du serveur de développement Webpack, ainsi que de la réécriture du proxy et du chemin pour diriger la demande vers l'API.

1
Jeff Weinberg

Cela fonctionne bien pour moi.

    devServer: {
        Host: '11.11.111.111',          //local ip
        port: 8080,
        contentBase: outputpath,
        historyApiFallback: true,
        inline: true,
        proxy: {
          '/api':{
                target:'http://example.com',
                pathRewrite: {'^/api' : ''},
                secure:false,
                changeOrigin:true
          }
        }
    },

//utilisation

    $.ajax({
        url:'/api/pvp/share/getsharecfg.php',
        dataType:'json',
        ...
0
He LI