6

I'm trying to use the webpack-dev-server proxy configuration to send api requests to an external domain and I can't seem to get it working.

Here's my config:

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

So, anytime my app makes a request with the uri /api/v1... it should send that request to http://laravelandwebpack.demo.

In my Vue app, I'm using the vue-resource to make the requests and I'm defaulting all requests with the needed uri prefix:

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

The URL's are being constructed correctly, but they're still pointing to localhost:8080 which is the webpack-dev-server:

Errant http request

I read and re-read the docs for webpack-dev-server and I can't figure out where I have it set up wrong. Any ideas?

Chris Schmitz
  • 20,160
  • 30
  • 81
  • 137
  • 1
    The urls are correctly pointing to `localhost:8080`, because that's your devserver, and only after the request arrived there, the devserver will proxy it (aka send it through to) the external url you provided. The devtools will never notice the proxy. What does happen to your requests, is the promise.catch() logging an error? what is it? (and you are not using the webpack template of vue-cli by any chance?) – Linus Borg Apr 08 '16 at 08:53

2 Answers2

2

@Linus Borg is right.

The URL's are being constructed correctly, but they're still pointing to localhost:8080 which is the webpack-dev-server:

This doesn't matter.

In my case, I want to get http://m.kugou.com/?json=true. And I am using @Vue/cli ^3.0.0-beta.15, maybe you need to modify your code according to situation.

So, here is what I did:

App.vue

  axios.get('/proxy_api/?json=true').then(data => {
    console.log('data', data)
  })

vue.config.js

module.exports = {
  devServer: {
    proxy: {
      // proxy all requests whose path starting with /proxy_api to http://m.kugou.com/proxy_api then remove '/proxy_api' string
      '/proxy_api': {
        target: 'http://m.kugou.com',
        pathRewrite: {
          '^/proxy_api': '/'
        }
      }
    }
    //or just change the origin to http://m.kugou.com
    // proxy: 'http://m.kugou.com'
  }
}

I use /proxy_api/?json=true then update it to http://m.kugou.com/?json=true by target and pathRewrite.

'/proxy_api' is used to distinguish if the url should be proxied.

Why would I use /proxy_api? Easy to distinguish.

I got the data from http://m.kugou.com/?json=true while the url in the dev-tool is http://localhost:8080/proxy_api/?json=true.

See? that doesn't matter.

xianshenglu
  • 4,943
  • 3
  • 17
  • 34
1

I found a workaround solution for that issue. In my case I need to proxy requests to my backend for any /api/* path, so I'm bypassing any requests which does not starts with api.

Sample: 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; } } } }

Mateusz Odelga
  • 354
  • 2
  • 7