Webpack-dev-serverがプロキシ経由で外部ドメインにリクエストを送信しない

Question

webpack-dev-serverプロキシ設定を使用して外部ドメインにapiリクエストを送信しようとしていますが、動作しないようです。だから、いつでも私のアプリは、それがhttp://laravelandwebpack.demoにその要求を送信する必要がありURI /api/v1...との要求を行う

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 
      } 
     } 
    } 
} 

：

は、ここに私の設定です。

私のVueのアプリでは、私が要求を行うためにvue-resourceを使用していると私は必要なURI接頭辞ですべての要求をデフォルトにしています：

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); 
     }) 
    } 
}) 

正しく構築されているURLのですが、彼らはしているがまだWebPACKの-devのサーバーであるlocalhost:8080を指している：私は読んで

のWebPACK-devのサーバーのためのドキュメントを再読み込みし、私はそれが間違って設定しているところ私が把握することはできません。何か案は？

Answer 1

この問題の回避策を見つけました。私の場合、バックエンドには/api/*パスの要求をプロキシする必要があるので、apiで始まらないリクエストはバイパスしています。

サンプル： 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; } } } }