webpack Development server: webpack-dev-server Using proxy

Example

webpack-dev-server can proxy some requests to others servers. This might be useful for developing API client when you want to send requests to same domain.

Proxy is configured via proxy parameter.

Example configuration of dev server passing requests to /api to other service listening on port 8080 might look like this

// webpack.config.js
module.exports = {
  ...
  devServer: {
    proxy: {
      "/api": {
        target: "http://localhost:8080"
      }
    }
  }
...
}

rewrite

It is possible to rewrite destination path using pathRewrite option.

Assuming you want to strip /api prefix from previous example your config might look like

// webpack.config.js
  ...
  devServer: {
    proxy: {
      "/api": {
        target: "http://localhost:8080",
        pathRewrite: {"^/api" : ""}
      }
    }
  }
...

Request /api/user/256 will be converted to http://localhost:8080/user/256.

filter

It is possible to proxy only some requests. bypass allows you to provide function which return value will determine if request should be proxied or not.

Assuming you only want to proxy only POST requests to /api and let webpack handle the rest your configuration might look like this

// webpack.config.js
  ...
  devServer: {
    proxy: {
      "/api": {
        target: "http://localhost:8080",
        bypass: function(req, res, proxyOptions) {
          if(req.method != 'POST') return false;
        }
      }
    }
  }
...