Vue Router hosting issue apache2 - vue.js

Im using history mode in my vue app and when I build the project and try to run it off the server, only about half of my routes are working properly. The other half return a 404.
I went through the documentation as well as check all of the other answers on similar questions on SO and none of the solutions are working for me.
Ive tried adding a .htaccess file inside the root dist folder, ive tried adding inside the default .conf and the site specific .conf and nothing is working.
.htaccess file inside the dist folder
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
Here is the apache config that is pointing to my dist folder, i've tried adding the above code at the bottom of this file as well and it didnt work.
<VirtualHost *:80>
ServerName Sitename
ServerAlias Sitename
Redirect permanent / Sitename
</VirtualHost>
<VirtualHost *:443>
ServerName Sitename
ServerAlias Sitename
DocumentRoot "/var/www/Sitename/dist"
ProxyPreserveHost On
ProxyPass /api http://127.0.0.1:5010/api
ProxyPassReverse /api http://127.0.0.1:5010/api
SSLEngine On
SSLCertificateFile /etc/letsencrypt/live/Sitename/fullchain.pem
SSLCertificateKeyFile /etc/letsencrypt/live/Sitename/privkey.pem
</VirtualHost>
Vue router code
const router = new VueRouter({
routes,
mode: 'history',
base: "/",
scrollBehavior (to, from, savedPosition) {
if (to.hash) {
return {selector: to.hash}
} else {
return { x: 0, y: 0 }
}
}
})
So If the dist folder is the root folder, why is the .htaccess code not fixing the router history issue on deployment? It seems from everyones answers on this site that is the solution, but it is not working. Am i missing something?

I solved the issue by adding this line to the bottom of my sites-enabled .conf file
FallbackResource /index.html

Related

VirtualHost config causing 301 redirect loop

I am trying to setup a virtual server to host multiple websites,
each site's content is in /var/www/html/site.com/public_html.
There have a VirtualHost config for each site under /etc/apache2/sites-available/site.com.conf as seen here:
/etc/apache2/sites-available/site1.com.conf:
<VirtualHost *:443>
DocumentRoot /var/www/html/site1.com/public_html
ServerName site1.com
<Directory /var/www/html/site1.com/public_html/>
AllowOverride None
</Directory>
</VirtualHost>
<VirtualHost *:80>
DocumentRoot /var/www/html/site1.com/public_html
serverName site1.com
<Directory /var/www/html/site1.com/public_html/>
AllowOverride None
</Directory>
</VirtualHost>
All this config is needing to do is direct the incoming domain request to its root directory, nothing else. however the moment I apply apply this config file it will cause a 301 redirect loop.
As you can see I have disabled AllowOverride to avoid interference from .htaccess to eliminate that variable, by enabling AllowOverride to all it also results in a redirect loop with no change in behaviour. In case needed hear is the httpd.conf file that's not getting applied:
.htaccess:
# BEGIN WordPress
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
# END WordPress
I have also tried completely removing the .htaccess file to eliminate that variable and it still resulted in a redirect loop.
Additionally if I where to manually change the URL to point to a file in the site like /index.php or /wp-admin/ it will result in a 302 redirect loop to that same file or folder.
index.php also does not refer back to itself but rather starts the wordpress program, and php.ini also does not have any redirect config.
I cannot find where the redirects may be happening, some guidance on potential faults in the current config of what other files may be causing redirects would be much appreciated.

How to configure Vue router history mode in Apache

I'm getting this error when I try to add the line below on my /etc/httpd/conf/httpd.conf:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
Syntax error on line 228 of /etc/httpd/conf/httpd.conf:
RewriteBase: only valid in per-directory config files
I'm using Apache/2.4.6 (CentOS 8)
The only thing I changed in my httpd folder are:
/etc/httpd/conf/httpd.conf:
<VirtualHost *:80>
ServerName masterseller.ph
Redirect permanent / https://masterseller.ph
</VirtualHost>
and
/etc/httpd/conf.d/ssl.conf:
<VirtualHost *:443>
DocumentRoot "/var/www/html/masterseller/dist/"
... (+ SSL configs)
</VirtualHost>
Oh btw I'm trying to deploy my vue dist folder (which is also my DocumentRoot).
My Vue-Rounter:
const router = new VueRouter({
mode: "history",
base: "/",
routes
});
I'm trying to follow and understand this instruction:
https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations
I tried to add 'FallbackResource /index.html' at the end of my httpd.conf file, It worked, but I wouldn't be able to access my phpmyadmin page.
What am I mising? I'm new to all this.
Thank you in advance for your answers (also my boss doesn't want the hash mode for the vue router)
The error means the config won't work in the base config file. In Apache you can also place a "per-directory" configuration in each directory.
Create a new .htaccess file in the dist root and place the configuration in it.
The .htaccess Apache docs say:
.htaccess files (or "distributed configuration files") provide a way to make configuration changes on a per-directory basis. A file, containing one or more configuration directives, is placed in a particular document directory, and the directives apply to that directory, and all subdirectories thereof.

How to put a Silex based website online

I've been making a website using Silex, with my dispatcher and an .htaccess inside the web/ folder, with the following rules :
<IfModule mod_rewrite.c>
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.php [L]
</IfModule>
I have also configured Apache's virtual host with the following rules :
<VirtualHost *:80>
ServerAdmin webmaster#dummy-host.localhost
DocumentRoot "c:/wamp/www/FarmaDubno/web"
ServerName FarmaDubno
ServerAlias FarmaDubno
ErrorLog "logs/FarmaDubno-error.log"
CustomLog "logs/FarmaDubno-access.log" common
</VirtualHost>
Now that the website is finished, I want to put it online. However, I didn't find such thing as a document root in the hosting service's parameters.
So I asked them what they suggested to do, and they told me the only way was with a .htaccess redirecting to the web/ folder.
The thing is : if I put the document root outside the web/ folder, the user might be able to go to the other folders of the project (such as app/, db/ or vendor/).
Any idea ?

rewrite subdomain to direcory in same server

I have a domain, lets say mydomain.com.
I want every subdomain of this to load the contents of the directory with the same name... For example, if someone writes
http://sub.mydomain.com/index.php
I want to show him the contents of
http://sub.mydomain.com/sub/index.php
Still, I want it to show in the addressbar the http://sub.mydomain.com/index.php
The apache vhost is like
<VirtualHost *:80>
ServerName *.mydomain.com
DocumentRoot /var/www/vhosts/mydomain.com/subdomains/subs/www
... more stuff ...
</VirtualHost>
so in the filesystem, the files for the example above would be under the directory
/var/www/vhosts/mydomain.com/subdomains/subs/www/sub
I tried many of the proposed solutions here, but most of them were redirects to some other domain/subdomain or end up in a redirect loop :(
tia
You need to add some rewrite rules that will examine the sub domain and then rewrite to the relevant path:
<VirtualHost *:80>
ServerName mydomain.com
ServerAlias *.mydomain.com
RewriteEngine On
RewriteCond %{HTTP_HOST} (.*)\.mydomain\.com
RewriteRule ^/(.*)$ /%1/$1
DocumentRoot /var/www/vhosts/mydomain.com/subdomains/subs/www
... more stuff ...
</VirtualHost>
What this will do is capture anything preceding ".mydomain.com" then rewrite it into the URL as %1, $1 will be the requested resource such as index.html
Be aware this might trip you up if www.mydomain.com is a valid domain for your site!
Try this code in your DOCUMENT_ROOT/.htaccess file:
RewriteEngine On
RewriteCond %{HTTP_HOST} ^sub\.[^.]+\.[^.]+$ [NC]
RewriteRule !^sub(|/$) /sub%{REQUEST_URI} [L,NC]

Priority for Apache Rewrite Module Matching the folder

Vhost config:
<VirtualHost *:80>
ServerAdmin XXX#XXX.com
ServerAlias *.cccc.net
ServerName lolololololol.cccc.net
DirectoryIndex index.html index.php index.htm
DocumentRoot /home/someuserblabla/ccccnet
#Rewrite abc.cccc.net to ./abc (folder). (hidden rewrite, without redirect)
RewriteEngine On
RewriteCond %{HTTP_HOST} ^(.*)\.cccc\.net$
RewriteRule ^(.*)$ /%1/$1 [L]
DirectoryIndex index.php index.htm index.html
</VirtualHost>
DNS : *.cccc.net ==> 99.99.99.99
Everything works fine.
If you enter wow.cccc.net, but there is no that folder, The server will return a 404 Not Found.
The interesting thing is: Today, I'm going to add a folder called dev(/home/someuserblabla/ccccnet/dev), but It always return a 403 error, and this problem is immediately solved when I simply rename the folder.
I double checked all config files of Apache, It seems nothing wrong, And there is no "filter" for something called "dev"
After that, I remember there is a folder call "dev" in the system root.
Then I tried etc.cccc.net root.cccc.net ....
They all return 403 error instead of 404.
My Clue Is:
There is a order for rewrite module to match the directory. It search the root folder first, then the current folder.
Is there any suggestions? I don't want it searching the root directory.
Thanks.
Yes, your rewrite rule has / as the base directory, so that's where it rewrites to. Try:
RewriteRule ^(.*)$ /home/someuserblabla/csuwnet/%1/$1 [L]