Webpack-dev-server: Proxy not working

[chrismcv]

Hi,

I'm using the following configuration, and running webpack-dev-server --content-base public

  proxy: {
    '/api/*': {
      target: 'http://localhost:4907',
      rewrite: function(req) {
        console.log(req)
        req.url = req.url.replace(/^\/api/, '');
      }
    }
  },

All requests e.g. /api/user/current have a 404 response, and my console.log never fires. Is there some other part of the config that I'd need to change?

Thanks,
Chris

[paulvanbladel]

Yep, I confirm that proxy is not working.

[sokra]

there is no rewrite option.

See options here: https://www.npmjs.com/package/http-proxy-middleware

[cwhenderson20]

I am also experiencing this issue and am not using any kind of rewrites, just a simple:

proxy: {
  '/api/*': {
    target: 'http://localhost:4001'
  }
}

Similarly to @chrismcv, I get a 404 for /api routes and the server to which I am proxying never receives the request.

Edit: express in debug mode reports this progress of events when one of the endpoints is hit:

express:router dispatching GET /api/test +6s
  express:router query  : /api/test +1ms
  express:router expressInit  : /api/test +0ms
  express:router webpackDevMiddleware  : /api/test +1ms
  express:router <anonymous>  : /api/test +1ms
  express:router middleware  : /api/test +0ms

... but any logging within the express route does not happen.

[robertjmason]

For those committed to Webpack 2 beta but need request proxying with your HMR, if you install [email protected] and swap in 2.0.0 beta's reloadApp() in /client/index.js, it ships the webpackHotUpdate messages via EventEmitter and world peace ensues. It's just a workaround/bandaid, but it's a relatively painless one: gist

[denglingbo]

http how to proxy https?

http://page.com/
ajax: https://xxxxx

[lhecker]

As @sokra already mentioned the pathRewrite option can now be used for this.

It would be cool, @sokra, if this could be mentioned in the docs somewhere. :blush:

[tomascharad]

Hi,

I'm getting a 502 (Bad Gateway) error while using webpack 2 beta and webpack-dev-server with HMR while trying to proxy.
Any clues on this?

[tomascharad]

Was caused by a Rails problem, not webpack. Sorry.
(if someone is using Rails 5.rc you should change localhost:3000 to [::1]:3000 in the meantime).

[Romathonat]

I had an error with ajax call too : when I made request to my backend, there was a 404 error and the proxy did not seem to work. In fact, it was because the matched pattern is used in the redirection : you can delete it that way :

proxy: {
     '/api/**': {
        target: 'http://localhost:8080/',
        rewrite: function(req) {
          req.url = req.url.replace(/^\/api/, '');
        },
        changeOrigin: true
     }
  }

So, that way my calls to http://localhost:3000/api/** are redirected to http://localhost:8080/, and not http://localhost:8080/api

[SpaceK33z]

@chrismcv, were you able to solve your issues with the answers provided above?

[westor21]

For me before angular2 rc.5 this worked:

proxy: {
  '/api*': {
    target: 'http://localhost:5001'
  }
}

Now I got also 404 errors for all of my services.
I removed the * and that fixed it:

proxy: {
  '/api': {
    target: 'http://localhost:5001'
  }
}

[SpaceK33z]

pathRewrite is documented now in the docs, so closing this issue.

If your proxy still doesn't work, but worked in old versions of 1.x, try to add secure: false. I've seen that help sometimes.

[johnhamm]

Just incase anyone else is running into this issue - the PHP standalone server also requires "[::1]" instead of localhost:
proxy: [ { path: '**', target: 'http://[::1]:3000', secure: false } ]

[jellyfish-tom]

above solution works on OS X, hitting java server running on 8081, from webpack on 9000.
Thanks!

[karl-gustav]

We got 404 from azure api servers, and we solved it by adding changeOrigin: true to our proxy config.

"/api": {
    target: "https://devapi.example.com",
    secure: false,
    changeOrigin: true
}

[tindn]

@karl-gustav just spent 3 hours debugging the 404 error. Your comment saved me potentially more hours. Researching back at the http-proxy-middleware docs, I found the tip Set the option changeOrigin to true for name-based virtual hosted sites., and setting this option to true would changes the origin of the host header to the target URL.

I still don't fully understand the reason for this. Would appreciate any help.

[karl-gustav]

@tindn I’m afraid we won’t be much help here, we just tried stuff until it worked :-(

[Wowgreat]

@karl-gustav Good, I do so and it works well now.

[nimatrazmjo]

I have same issue. All above advice does not work

[thebarefootdev]

Ive been trying to add it to an Angular Cli app, and it doesn't work either, no solutions thus far

[NodiraIbrogimova]

I tried all options above in my vuejs app, but none of them seem to work.
In webpack.config.js I added the following:

devServer: {
    historyApiFallback: true,
    // noInfo: false,
    // overlay: false, 
    proxy: {
      '/accountApi': {
        target: 'http://someapiurl.net/',
        secure: false,
        changeOrigin: true,
        pathRewrite: {
          '^/accountApi' : ''
        }
      }
    }
  }

and writing POST request in one of the components as:

        .post(`/accountApi/api/users/....`, {
          current_password: this.currentPassword,
          password: this.newPassword_1,
          password_confirmation: this.newPassword_2
        })
        .then(response => {
          ....
        })

But, this seems not to work, as long as I'm getting the error :
The requested URL /accountApi/api/users/... was not found on this server.

Anybody can help me to figure out what's wrong here, please?

[jcarenza]

@NodiraIbrogimova this worked for me:

devServer: {
    proxy: {
        "/api": {
            target: "http://localhost:5000",
            pathRewrite: (req) => req.replace(/^\/api/, "")
        }
    }
}