How can I set up a proxy in webpack-dev-server?

How can I set up a proxy in webpack-dev-server?

You can set up a proxy in webpack-dev-server by adding a 'devServer' section in your webpack configuration. You can specify the proxy settings like this:

devServer: {
  proxy: {
    '/api': {
      target: 'http://localhost:3000',
      changeOrigin: true,
    },
  },
},

What does 'changeOrigin' do in the proxy configuration?

The 'changeOrigin' option modifies the origin of the host header to the target URL. This is useful when the API server requires the correct origin to be set.

Can I proxy multiple endpoints?

Yes, you can proxy multiple endpoints by adding more entries in the proxy object. For example:

proxy: {
  '/api': { target: 'http://localhost:3000', changeOrigin: true },
  '/auth': { target: 'http://localhost:4000', changeOrigin: true },
},

Is there a way to log the proxy requests?

Yes, you can use the 'onProxyReq' option to log requests. Here's an example:

proxy: {
  '/api': {
    target: 'http://localhost:3000',
    changeOrigin: true,
    onProxyReq: (proxyReq, req, res) => {
      console.log('Proxying request:', req.url);
    },
  },
},