Webpack dev-server proxy to localhost

Question

I am struggling with webpack dev server proxy. I am using webpack 5.

The goal is to have webpack dev server with local Apache api (PHP/Laravel). Webpack dev server has this settings:

devServer: {
 host: 'localhost',
 port: 8080,
 hot: true,
 firewall: false,
 public: 'http://dummy.com',
 proxy: {
 '/admin': 'http://dummy.com',
 '/api': 'http://dummy.com',
 "changeOrigin": true,
 "secure": false,
 },
}

I want to be able to access API on dummy.com via proxy. But it is not working. It always ends up on http://localhost.

Windows 10 hosts file:

127.0.0.1 dummy.com

Apache virtual hosts:

<VirtualHost *:80>
 ServerAdmin webmaster@localhost
 DocumentRoot "e:\www\TEST\public"
 ServerName dummy.com
 
 ErrorLog logs/localhost
 CustomLog logs/localhost-access_log common
 
 <Directory "e:\www\TEST\public">
 Options All
 AllowOverride All
 Require all granted
 </Directory>
</VirtualHost>

Webpack dev server works fine, but the proxy doesn't. No matter what domain I put into the target, it always proxies to http://localhost. What am I doing wrong? It looks like Apache doesn't receive the request headers and the proxy calls the IP directly.

Thanks for any help!

• InquisitiveTom: Did you ever get this resolved? Running into the same issue
• Peter Matisko: I don't even remember to be honest. I switched to Vite and similar setting works fine.
• InquisitiveTom: Good deal, thank you!

Answer 1

This is a bit old but I just had the same issue on Webpack 5 and this is what resolved it:

proxy: {
 '/api': {
 target: 'http://some.local.domain.from.vhost:80',
 changeOrigin: true,
 },
}

Where the important part is:

changeOrigin: true

So now a call to http://localhost:3000/api/XYZ (webpack dev server) will hit http://some.local.domain.from.vhost:80/api/XYZ (apache local vhost)

As far as the vhost goes:

<VirtualHost *:80>
ServerAdmin admin@localhost
ServerName some.local.domain.from.vhost
ServerAlias www.some.local.domain.from.vhost
DocumentRoot /var/www/path/to/the/project/
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined

This was tested on Ubuntu 20.04, Apache/2.4.41 and Webpack ^5.64.0. Please also look into devServer.setupMiddlewares as this can also cause issues along the way.