webpack-dev-server: Proxy not working

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

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
}

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

http how to proxy https?

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

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

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?

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

@NodiraIbrogimova this worked for me:

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

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

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

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.

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