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!

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.