CODEWITHSUNDEEP
proxyvue.jswebpack-dev-servervue-resource
Chris Schmitz
Chris Schmitz

Reputation: 20950

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

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?

Upvotes: 6

Views: 4706

Answers (2)

xianshenglu
xianshenglu

Reputation: 5329

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

Upvotes: 2

Mateusz Odelga
Mateusz Odelga

Reputation: 354

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

Upvotes: 1

Related Questions