Currently, I am experimenting with a Vue app and testing it using pm2 in conjunction with Apache. After starting the app with pm2 and running it on port 3000, I then utilize an Apache reverse proxy to access the app through a domain and HTTPS. However, I encounter an issue where I need to retrieve the base_url correctly.
At the moment, I obtain the base_url using the following code snippet:
var base_url = window.location.origin;
Within a Vue app, this script always returns localhost:3000. However, since the URL has been altered by the proxy configuration, the expected new URL should be mydomain.com.
How can I detect that the app is receiving requests via the proxy server and return the accurate base_url within Vue?
Below is my Apache config:
<VirtualHost *:80>
ServerAdmin email [email protected]
ServerName mydomain.com
ServerAlias www.mydomain.com
DocumentRoot /var/www/html
ProxyRequests Off
ProxyPreserveHost On
ProxyVia Full
<Proxy *>
Require all granted
</Proxy>
ProxyPass / http://localhost:3000/
ProxyPassReverse / http://localhost:3000/
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
RewriteEngine on
RewriteCond %{SERVER_NAME} =mydomain.com [OR]
RewriteCond %{SERVER_NAME} =www.mydomain.com
RewriteRule ^ https://%{SERVER_NAME}%{REQUEST_URI} [END,NE,R=permanent]
</VirtualHost>