title: WebpackDevServer Proxy Setup
body: <p>How do I set up a proxy using WebpackDevServer in my React/Node chrome extension? My server is run on <code>localhost:4000</code> and React frontend on <code>localhost:5000</code></p>
  <p>Using Axios, I try and hit the route: <code>axios.get(/api/user/ticket)</code>, however, <code>localhost:4000</code> is not proxied and the route that is hit is my chrome extension: <code>chrome-extension://fjkfhdsjkwerjhdksfhdjkshfds/api/ticket/user/</code>.</p>
  <p>If I explicitly call localhost: <code>axios.get(localhost:4000/api/user/ticket)</code>, then everything works properly. I'm new to webpack so not fully sure what I'm doing wrong. Thank you for the help!</p>
  <p><strong>Webserver proxy implemented using the <a href="https://webpack.js.org/configuration/dev-server/#devserverproxy" rel="nofollow noreferrer">docs</a></strong></p>
  <pre><code>var server = new WebpackDevServer(
    {
      https: false,
      hot: false,
      client: false,
      proxy: {
        '/api': 'http://localhost:4000',
      },
      host: 'localhost',
      port: env.PORT,
      static: {
        directory: path.join(__dirname, '../build'),
      },
      devMiddleware: {
        publicPath: `http://localhost:${env.PORT}/`,
        writeToDisk: true,
      },
      headers: {
        'Access-Control-Allow-Origin': '*',
      },
      //this needs to change to prevent dns attacks
      allowedHosts: 'all',
    },
    compiler
  );
  </code></pre>