Webpack dev-server proxy to localhost

Question 1

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!

Question 2

Did you ever get this resolved? Running into the same issue

Question 3

I don't even remember to be honest. I switched to Vite and similar setting works fine.

Question 4

Good deal, thank you!

Question 5

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 hithttp://some.local.domain.from.vhost:80/api/XYZ (apache local vhost)

As far as the vhost goes:

<VirtualHost *:80>ServerAdmin admin@localhostServerName some.local.domain.from.vhostServerAlias www.some.local.domain.from.vhostDocumentRoot /var/www/path/to/the/project/ErrorLog ${APACHE_LOG_DIR}/error.logCustomLog ${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.

marcinrek 3491 silver badge9 bronze badges · Accepted Answer · 2022-10-03 16:13:51Z

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 hithttp://some.local.domain.from.vhost:80/api/XYZ (apache local vhost)

As far as the vhost goes:

<VirtualHost *:80>ServerAdmin admin@localhostServerName some.local.domain.from.vhostServerAlias www.some.local.domain.from.vhostDocumentRoot /var/www/path/to/the/project/ErrorLog ${APACHE_LOG_DIR}/error.logCustomLog ${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.

Movatterモバイル変換

Collectives™ on Stack Overflow

Webpack dev-server proxy to localhost

1 Answer1

Comments

Your Answer

Sign up orlog in

Post as a guest

Related

Hot Network Questions

Subscribe to RSS