WebpackDevServer Proxy Setup-CodePudding

How do I set up a proxy using WebpackDevServer in my React/Node chrome extension? My server is run on localhost:4000 and React frontend on localhost:5000

Using Axios, I try and hit the route: axios.get(/api/user/ticket), however, localhost:4000 is not proxied and the route that is hit is my chrome extension: chrome-extension://fjkfhdsjkwerjhdksfhdjkshfds/api/ticket/user/.

If I explicitly call localhost: axios.get(localhost:4000/api/user/ticket), then everything works properly. I'm new to webpack so not fully sure what I'm doing wrong. Thank you for the help!

Webserver proxy implemented using the docs

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

CodePudding user response：

Proxy still doesn't work, however, I got around this by using baseUrls in axios. When in prod vs dev I just have to change them in one place and it works. Not ideal but it gets the job done.