Creating a expressjs proxy server between webpack and API

Question

Hello i'm creating a web application using webpack, which makes REST api call to a backend server. The problem I have is CORS issues, so I will need to use a proxy.

Which leads me to how do I connect wepback-dev-server which runs on port(8080) to my api server which runs on port (7000)? Would my proxy server run same as port(8080)?

I read up on expressjs, npm node-http-proxy and webpack, but struggling to tie it all together.

I'm new to proxying.

Answer 1

Below a sample config for webpack-dev-server, see the proxy option

var config = {

  // webpack stuff here ...

  //dev server configuration
  devServer: {

    // ...

    // every request made to 'locahost:8080/api/xxxx' will be proxyfied to 'http://localhost:7000/api/xxxx'
    proxy: {
      "/api/*": {
        target: "http://localhost:7000",
        secure: false,
        rewrite: function(req, options) {
          //you can handle rewrite here if you need to        
        }
      },

    }
  },
 // 
};

module.exports = config;

As described here https://webpack.github.io/docs/webpack-dev-server.html#proxy

Hope it helps,

EDIT as for webpack-dev-server v 1.14.1 'rewrite' is still implemented