Webpack-dev-server non invia richieste a dominio esterno tramite proxy

Question

Sto provando a utilizzare la configurazione proxy webpack-dev-server per inviare richieste API a un dominio esterno e non riesco a farlo funzionare.

Ecco la mia configurazione:

var path = require('path') 

module.exports = { 
    entry: './client/index.js', 
    output: { 
     filename: 'bundle.js', 
     path: path.resolve(__dirname, 'public/assets'), 
     publicPath: 'assets' 
    }, 
    devServer: { 
     contentBase: 'public', 
     proxy:{ 
      '/api/v1*': { 
       target: 'http://laravelandwebpack.demo/', 
       secure: false 
      } 
     } 
    } 
} 

Così, ogni volta che la mia app fa una richiesta con l'URI /api/v1... è necessario inviare la richiesta al http://laravelandwebpack.demo.

Nel mio Vue app, sto usando il vue-resource per fare le richieste e sto inadempiente tutte le richieste con il prefisso uri necessaria:

var Vue = require('vue') 
Vue.use(require('vue-resource')) 

new Vue({ 
    el: 'body', 
    http: { 
     root: '/api/v1', // prefix all requests with this 
     headers:{ 
      test: 'testheader' 
     } 
    }, 
    ready: function(){ 
     this.$http({ 
      url: 'tasks', 
      method: 'GET' 
     }).then(function (response){ 
      console.log(response); 
     }, function (response){ 
      console.error(response); 
     }) 
    } 
}) 

del vengono costruiti in modo corretto, ma sono URL ancora indicando localhost:8080 che è il webpack-dev-server:

ho letto e riletto la documentazione per webpack-dev-server e non riesco a capire dove ho sbagliato da esso istituito . Qualche idea?

Answer 1

Ho trovato una soluzione alternativa per questo problema. Nel mio caso ho bisogno di inoltrare richieste al mio back-end per qualsiasi percorso /api/*, quindi sto bypassando qualsiasi richiesta che non inizia con api.

Esempio: proxy: { '*': { target: 'http://localhost:8081', secure: false, rewrite: function(req) { console.log('rewriting'); req.url = req.url.replace(/^\/api/, ''); }, bypass: function(req, res, proxyOptions) { if (req.url.indexOf('api') !== 0) { console.log('Skipping proxy for browser request.'); return '/index.html'; }else{ return false; } } } }