webpack-dev-server proxy not working

Question

My app uses a Python backend so when I'm running locally I need to proxy my requests to a different port than what Webpack is running on.

I've tried several different ways of making this work:

devServer: {
  contentBase: outDir,
  proxy: [
    {
      path: "**",
      target: "http://localhost:8000",
      secure: false,
      bypass: function(req, res, options) {
        if(req.url === '' || req.url === '/') {
          res.statusCode = 302;
          res.setHeader('Location', '/a/');
          return '/a/';
        }

        var frontend = new RegExp("^\/$^|\/a\/index\.html|^\/a\/|^\/a$|^\/styleguide");
        if (frontend.test(req.url)) return req.url;
      }
    }
  ],
  // serve index.html for all 404 (required for push-state)
  historyApiFallback: true,
},

And this:

proxy: [{
  context: '/',
  target: 'http://localhost:8000',
}],

Both of those will at least show a message similar to this when it starts up: [HPM] Proxy created: ** -> http://localhost:8000. When I look at the docs and do something like this, it doesn't work either (I don't even get a message about the proxy running):

proxy: {
  "/": "http://localhost:8000"
}

Is there something obvious I'm doing wrong? I'be been trying every combination that I can think of to make it work.

Answer 1

Try to add changeOrigin: true. Don't forget to change API pattern.

proxy: {
  '/api/**': {
    target: 'http://localhost:8000',
    secure: false,
    changeOrigin: true
  },
}