Webpack-dev-server not sending requests to external domain via proxy

Question

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:

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?

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
– Linus Borg, Commented Apr 8, 2016 at 8:53

xianshenglu · Accepted Answer · 2018-06-23 05:49:27Z

@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.

Mateusz Odelga · Accepted Answer · 2016-04-27 13:10:21Z

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

answered Apr 27, 2016 at 13:10

Mateusz Odelga

3542 silver badges7 bronze badges

2 Comments

partizanos Over a year ago

In which configuration file did you put this object?

Sakhi Mansoor Over a year ago

inside devServer in webpack config,

Collectives™ on Stack Overflow

Webpack-dev-server not sending requests to external domain via proxy

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related