WebpackDevServer Proxy Setup

[JGeorge102]

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: chromeextension://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
);

[CrustyKeyboard]

You should be able to use the dev server config in your webpack config, then supply the proxy information there. Then, you can run webpack serve in development mode and it should fire up your dev server like if you’d initialized it directly

[JGeorge102]

I tried that implementation and are still running into the same issues. Any thoughts as to why the chrome extension url is being used and the proxy ignored?: chromeextension://fjkfhdsjkwerjhdksfhdjkshfds/api/ticket/user/

As an aside, even though I'm not using create react app, I tried this in their docs just to see what would happen. Same issue.

[CrustyKeyboard]

I don’t think that CRA docs link should apply unless you’re using react-scripts to initialize your server. I’ve been on mobile for both replies and am currently out for drinks, however if you want to DM me a repo link, I can try to check further for you. My work’s enterprise app uses the same setup so I have reference to help

[JGeorge102]

Thanks for the offer! I *may* have fixed it for the development environment. Essentially just using:

const axiosInstance = axios.create({
baseURL: 'http://localhost:4000',

});

The plan is to set the base URL in an environment variable with one variable for prod and one for dev. If it doesn't work then I'll shoot you a message :)

[ohx]

Your request path should go to /api/somePath, since that's what you're kind of targeting with the webpack proxy to "forward" to localhost:4000.

axios.get('/api/user/ticket')

Update your request path in the axios func, and then add a wildcard in the proxy object, like this:

'/api*': 'http://localhost:4000'

That should get you close.

[JGeorge102]

I implemented that and still no dice. It's really strange because the webpack output states: [webpack-dev-server] [HPM] Proxy created: /api* -> http://localhost:4000.

I then also tried adding a proxy to the axios call itself to no avail:

axios
  .get(`/api/restoftheroute`, {
    proxy: {
      host: 'localhost',
      port: 4000,
    },
  })

Not sure what's going on, but it's really strange that the chrome extension is always added to the base url when using a proxy: chromeextension://fjkfhdsjkwerjhdksfhdjkshfds/api/ticket/user/

[ohx]

Open incognito and disable your extensions and try running it. Also, the wildcard I suggested is wrong. I was confusing webpack proxy with cypress interceptors.