I am deploying an Vue3 Applikation with Vue-Router 4 on an Apache2 Server.
I observed some obstacles while doing it.
So my main problem is, that I can't pass Url Params to Vue via the Apache2 Server.
While developing the app and debugging it at localhost, everything worked perfectly.
e.g localhost:8080/myParam
Matches and redirects me to the index.html and passes the myParam to vue-router and the correct view is displayed.
So far so good.
Now I am deploying on an apache2 server and exactly that redirecting doesnt work.
I have read the docu and found this description:
https://router.vuejs.org/guide/essentials/history-mode.html#apache
The redirect works. But when I type in example.org/browse/myParam it redirects me to example.org/browse/index.html and my myParam is gone.
My Setup:
Apache 2.4, Vue3, Vue-Router4
The App is a Subapplication of a bigger project (thatswhy the app is not served in the root folder).
At the moment my App is running in a docker-container on the Server at port 8895, so I needed to create a proxypass in the apache.conf.
Because the files were not actually accessible at the server I also couldnt just use {REQUEST_FILE} (as shown in the vue-router example), so I solved it kind of hacky via the request uri and a pattern matching. But in my view that shouldn't be the problem, right?
#------------#
# BROWSER #
#------------#
ProxyPass /browse/ http://localhost:8895/
ProxyPassReverse /browse/ http://localhost:8895/
RewriteEngine On
<IfModule mod_negotiation.c>
Options -MultiViews
</IfModule>
<IfModule mod_rewrite.c>
RewriteRule ^/browse/index\.html$ - [L]
RewriteCond %{REQUEST_URI} !/browse/js/.*.js(.map)?$
RewriteCond %{REQUEST_URI} !/browse/css/.*.css$
RewriteRule ^/browse/ https://example.org/browse/index.html [L]
</IfModule>
Conclusion: I can visit my website, but only the homepage. I can't visit https://example.org/browse/Person/Sebastian directly. I can only go to https://example.org/browse/index.html and the click myself through the application.
I can't imagine that there are not many other people who had a similar problem, but I couldn't find any.
Related
I want to restrict access to a directory and all of its' sub-dirs and file using the following:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^(.*)ht-test(.*)$ - [NC,R=401,L]
</IfModule>
It works fine on index.html but not test.php. I have not clue what's going on. Shouldn't ^(.*)ht-test(.*)$ match anything containing it in the URL? Tested it with this site and it seems to be mathing both php and html.
I also tried using <Directory "./ht-test"> Deny from All </Directory> but that gives me Internal Server Error no matter what I put in.
Here're my tests:
http://deepcorelabs.com/ht-test/index.html
http://deepcorelabs.com/ht-test/test.php
Finally, figured it out. There's a settings in Plesk for how PHP is served (under Hosting Settings for the domain)
I was using FPM application served by nginx which igonores .htaccess directives for PHP files.
Apparently, for performance reasons
After changing it to 'served by Apache' it worked as expected.
For some reason I thought disabling nginx proxy mode will disable it completely as service.
I am trying to set up a Nuxt app using #nuxt/pwa starter-template for Server Side Rendering on a Shared Hosting.
However my Nuxt app is running on "http://localhost:50000". I am trying to show the running app from "http://example.com" by Rewriting Rule in .htaccess.
When trying to access "http://example.com" it's showing 404. Without the "Index (/)" route every other route is fine. Even coming to "Index (/)" route from any other route is also OK. Only showing 404 when trying to load the "/" route directly.
Eg:
http://example.com Doesn't work
http://example.com/contact Works fine
*** There is already an issue exactly like mine at Github: https://github.com/nuxt/nuxt.js/issues/2625
But I couldn't found anything helpful from there.
Here is the .htaccess file I am using. --
Options +FollowSymLinks
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteRule ^(.*) http://127.0.0.1:50000/$1 [P,L]
</IfModule>
Can somebody help me out with this issue??? Thanks in advance!
It seems to be a bit late for this answer, but I only found it in github and would like to help anyone who finds this topic with the same problem.
This htaccess is working for me, it loads the index.vue page normally when I refresh and the navigation works.
Replace my-domain with your domain.
RewriteEngine on
# Forcing all incoming requests to HTTPS.
# HTTPS is required for PWA. If you don't want PWA feature you can deisable next 2 lines
RewriteCond %{HTTP_HOST} ^my-domain.com.br$
RewriteRule "(.*.(jpg|gif|png|svg|js|css|woff2))$" "http://127.0.0.1:3000/$1" [P,NC]
RewriteRule ^(.*) "http://127.0.0.1:3000/$2" [P,L]
Use my .htaccess code:
RewriteRule ^index.html.var$ http://127.0.0.1:3000/ [P]
RewriteRule ^(.*) http://127.0.0.1:3000/$1 [P]
This problem has also troubled me for a long time.
I added _index.vue dynamic vue-router and,
validate ({params}) {
console.log (params.index);
}
The terminal outputs "index.html.var".
So I was thinking that when we visited the homepage, Apache sent a proxy, but the request URL received by nuxt.js was not "/" but "index.html.var".
A little late to this party but if anyone is experiencing the same issue, what fixed it for me was to disable DirectoryIndex in .htaccess.
RewriteEngine on
DirectoryIndex disabled
RewriteRule ^(.*) http://127.0.0.1:50000/$1 [P,L]
RewriteEngine on
Forcing all incoming requests to HTTPS.
HTTPS is required for PWA. If you don't want PWA feature you can deisable next 2 lines
RewriteCond %{HTTP_HOST} ^my-domain.com.br$
RewriteRule "(..(jpg|gif|png|svg|js|css|woff2))$" "http://127.0.0.1:3000/$1" [P,NC]
RewriteRule ^(.) "http://127.0.0.1:3000/$2" [P,L]
Work for me.
I have react app running on apache2.
In my app, there are 3 pages: home, about, register
I have 3 route like this:
<Route path="/home" component={....} />
<Route path="/about" component={.....} />
<Route path="/register" component={....} />
So, app works perfectly, when I go to www.onlyexampleurl.com, app is loaded correctly. I can list in home, about, register fine.
But, problem is, when I go directly to www.onlyexampleurl.com/about i am getting 404 from apache, because app is download from root path '/'.
How can I fix it? When I put www.onlyexampleurl.com/about to browser I want load about page from my app, but I am gettint 404 from apache.
Thank you for any help!
You need to redirect all requests to your entry file (assume it's index.html). Put in .htaccess:
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
This is standard solution for Single Page Apps.
This is a late response to the question, but I though I'd share what worked.for me, in case anyone bumps into the same problem.
This is assuming Ubuntu OS, I have not been successful for Linux:
I've followed certain steps from this post from Reddit and I can attest this works for making SPAs run in Apache web server with proper routing.
To quote:
1) In the apache2.conf located in etc/apache2/ I turned AllowOverride to All. I also added Servername localhost in the file. (I somehow skipped this last sentence, but still it worked fine in the end)
<Directory /var/www/>
Options Indexes FollowSymLinks
AllowOverride All
Require all granted
</Directory>
2) In the hosts.debian.tmpl file found in /etc/cloud/templates I added 127.0.0.1 <yourdomain.com> to the file where the other ips of the similiarity are.
127.0.0.1 yourdomain.com
3) I ran sudo a2enmod rewrite. Then I restarted the apache server via service apache2 restart. This turns on mod_rewrite.
Lastly inside of my project folder /var/www/html , along side my index.html file I created a .htaccess file and added in the following:
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule ^.*$ / [L,QSA]
End quote
Assuming you've run npm run build and then copied all the contents inside the build folder to your public directory, this should work.
When I first started web dev, I wasn't really sure I made the VirtualHost config right, so what I usually did was first to make a dummy index.html with, say, Hello World example. When I've confirmed that I'm able to see Hello World in the browser (which means I got the VirtualHost config right), I dump the contents of the build folder to where the dummy index.html was.
Hope this helps you now as much as it did for me!
Ive got an issue with apache's rewrite module. This is what im trying to do:
Ive got confluence(tomcat) running on a server with apache as reverse proxy in front.
Also, im using authentification in apache (form auth). So if ure trying to access [server]/confluence, you get redirected to a file login.php containing the authentification routine. If login succeeds, proxy lets u access tomcat.
Every other request is blocked. This works easily for every request except for [server]/login.php as this file exists indeed in htdocs. Every other request is handled with
FallbackResource wrong_url.shtml
Now i want to block direct access to login.php as you would get stuck in a dead end.
I tried to do this by using a RewriteCond with ${REQUEST_URI} as phpinfo() gave me this:
<server>/confluence (you automatically get redirected to login.php by apache): php says REQUEST_URI = /confluence
<server>/login.php: php says REQUEST_URI = /login.php
makes sense, though. Now what i did is:
<VirtualHost *:80>
ServerName 192.168.2.237
RewriteEngine on
RewriteCond %{REQUEST_URI} ^/login.php$
RewriteRule ^/login.php$ wrong_url.shtml [L]
</VirtualHost>
But this doesnt work properly. It either wont work at all or it crashes everything.
Pls forgive me if this is obvious, but im quite a beginner to rewriting. Can anybody tell me wheres my fault oder provide me a way to do this (propably, this is really easy)?
Have you checked the server logs ? Enable and set RewriteLogLevel (to 9) and debug the request flow.
Although you don't really need mod_rewrite for such a basic task, use mod_alias instead.
<VirtualHost *:80>
ServerName 192.168.2.237
Alias /login.php /wrong_url.shtml
</VirtualHost>
I've been tinkering with Apache + Tomcat so that I can serve multiple tomcat apps (in different machines) through apache (clean & crisp urls rock). I've succesfully configured mod_proxy_ajp & mod_rewrite to the point where I can serve two tomcat apps in different machines with almost no troubles.
The only issue I've found is that one of the apps (which I'm developing in Struts2) has a lot of links and forms, which are generated with <s:a />, <s:url /> and <s:form /> tags. The urls generated by these tags generally are like this:
/WebApp/path/to/some.action
Thanks to the magic of ModRewrite, this is generally not a big issue and hyperlinks poiting to such urls are quickly rewriten & redirected to /app/path/to/some.action (although I do get tons of 302 responses).
The real problem occurs when performing POST requests. As you all might know, I cannot redirect POST requests with mod_rewrite... so in the end... all of my POST requests don't work because mod_rewrite redirects to the correct url but as a GET request.
I have already read a bit about mod_proxy_html and how it can help me rewrite the urls returned by the Tomcat web application... but it feels troublesome.
This is my current apache configuration:
## HACKING BEGINS RIGHT HERE
# cookies
ProxyPassReverseCookiePath /WebApp /app
# this is for CSS, IMGs, JS and redirecting urls with /WebApp*
RewriteRule ^/WebApp(.*)$ /app$1 [R,L]
<Location /app>
ProxyPass ajp://localhost:8009/WebApp
ProxyPassReverse ajp://localhost:8009/WebApp
Order allow,deny
Allow from all
</Location>
# the other app
ProxyPassReverseCookiePath /WebApp2 /other
<Location /other>
ProxyPass ajp://200.9.4.6:8009/WebApp2
ProxyPassReverse ajp://200.9.4.6:8009/WebApp2
Order allow,deny
Allow from all
</Location>
There must be a solution to my POST requests problem... Any ideas? Can I somehow configure something that will allow Struts2 to output correct urls?
Thanks for your help.
There may be a couple ways to go about this.
If you are able to deploy your app to Tomcat under the same name that you are using in the URL, that would be the easiest. So your application app would be /webapps/app[.war] instead of /webapps/WebApp, this would avoid the rewrite altogether.
Otherwise, the following should work, and should go before your current rewrite rule. The [PT] should allow Apache to still proxy the request (this works when using mod_jk, not sure I've used/tested it with mod_proxy_ajp):
RewriteCond %{REQUEST_METHOD} POST
RewriteRule ^/WebApp(.*)$ /app$1 [PT,L]
Once your bean has processed the POST request, you could then send the request to a URL that would be redirected. In the end, the POST URL doesn't matter to the user, so it doesn't have to be a pretty URL.
Edits Below:
I saw on the Apache mod_proxy, that ProxyPassReverse should work with the [PT] flag. And I was able to replicate the issue you're having, and the below config worked for me with a basic JSP page with a form that posted to another JSP page.
<VirtualHost *:80>
ServerName localhost
RewriteEngine On
RewriteCond %{REQUEST_METHOD} !POST
RewriteRule /WebApp/(.*) /app/$1 [R,L]
RewriteCond %{REQUEST_METHOD} POST
RewriteRule /WebApp/(.*) /app/$1 [PT,L]
<Location /app>
ProxyPass ajp://localhost:8109/WebApp
ProxyPassReverse ajp://localhost:8109/WebApp
</Location>
</VirtualHost>
This is a problem with the webapp setup; there may be a way to work around it in httpd config, but it's cleaner to fix the original inconsistency vs. hacking around it.
Also worth mentioning that Struts is trying to help you by giving you context-aware, non-relative URLs; if you just make the paths match, you can rely on that (instead of fighting it...).
So, just deploy the Struts webapp to /app and /other, instead of /WebApp and /WebApp2. (There might be some reason this isn't possible -- like if you don't actually control those other servers -- but it sounds like that doesn't apply).
I would avoid URL rewriting. It just opens cans of worms like this, makes you look into mod_proxy_html, etc, which of course are just yet more worms. Instead just deploy your apps in Tomcat with real URLs you can live with as being visible externally.