Using vue.js(including vue-router) to make up the view and using express to make up the backend.
My question is that how to rewrite then URL with using SPA.
for example, start width then URL http://localhost:8080 and link to http://localhost:8080/foo it works, but when I refresh the page in URL
http://localhost:8080/foo it shows me 404 error.
So how can I write the URL like the function of .htacess in apache to rewrite the URL?
Related
I have a vHost where the main website is called coffee.loc at port 8002.
The website is supposed to be inside an intranet network, where there are specific links that need to be available for users outside of the intranet.
There is a specific address "http://coffe.loc:8002/drink?&drinkid=12" (or any other drinkid value) and another similar one which need to be allowed to access.
I have another vHost called redirect.loc at port 8888.
When accessing redirect.loc, the document root path is actually specified to be the root of coffee.loc. So by accessing redirect.loc we are actually accessing coffe.loc homepage. In the functionality of the homepage, based on the url a redirect is happening to the specific link.
So, once I access redirect.loc it's supposed to show the page available at:
http://coffe.loc:8002/drink?&drinkid=12 and it's doing so, however the URL is not supposed to change. It should be redirect.loc:8888 through the browsing, if the first request came from it.
I saw similar discussions on this topic, however none of them seemed to work. Once I was able to make a redirection without URL change, but the loading of files (css, js, images etc) were all wrong because Symfony read the root url to be http://coffe.loc:8002/drink?&drinkid=12 so I was getting errors 404 constantly.
I am using Symfony 1.4 and Apache2
EDIT:
I was able to make a redirection without URL change, but the loading of files (css, js, images etc) were all wrong because and returned error 404. I was using Proxy, and when I set proxy for redirect.loc to be set to coffee.loc:8002 it worked fine, I was seeing the start page of coffee.loc. However if I try to use the specific link in proxy set up, the page and all the requests end up with a status 404.
This is the set up for proxy:
<Proxy>
Order Deny,Allow
Allow from all
Allow from 203.0.113.67
</Proxy>
ProxyPass / http://coffe.loc:8002/drink?&drinkid=12
ProxyPassReverse / http://coffe.loc:8002/drink?&drinkid=12
I have 2 domains that is mapped to a single NuxtJS STatic Generated app. domain1.com should be just normal. But I want domain2.com to only show domain1.com/chat/ page on its every single URL may it be homepage or /h/ and /n/.
I already put a URL Rewrite on the desired folder location like /chat/. When I vist domain2.com the URL rewrite takes effect and renders the /chat/index.html, but immediately after the rewrite takes effect the router will also take effect then brings me to the homepage.
Is there a way to solve this? I am using IIS URL Rewrite in a Microsoft 2012 server by the way
Is it possible to open an vuejs subroute from an external page with nginx? E.G
https://www.vuejsapp.com/subroute/param123
My current result is redirect to the nginx 404 page.
Thanks for help,
best regards and stay healthy!
Vuejs router uses html5 pushstate for routing, which happens only in client side it means when a route changes it has nothing to do with server side and when external request comes to vue, first goes to server side and sees there is not path matching url and returns 404 so the only thing you should do is to rewrite all http requests to index.html file in that case server side will send all requests to index.html and then vue js will handle routing and finally your component will be mounted.
if your web server is apache you should do this (rewriting all requests to index.html) in .htaccess file
I am working with Angular2 and an Apache Tomcat 8. When opening my website with the root url it works and clicking buttons redirects to the specific urls. But when manually opening a specific url or reloading the webpage it gives me a 404.
I found this solution: Angular 2.0 router not working on reloading the browser but there is no explanation how to solve it with a tomcat.
I tried this in the web.xml of tomcat8:
<servlet>
<servlet-name>html-mapping</servlet-name>
<jsp-file>/index.html</jsp-file>
</servlet>
<servlet-mapping>
<servlet-name>html-mapping</servlet-name>
<url-pattern>/*</url-pattern>
</servlet-mapping>
Then I have no 404 anymore (it loads all files like the main.bundle.js) but only the Angular2 "Loading..." text is shown and it does not continue to open the WebApp.
Just solved this issue on a project. All that is needed here would be to create a very simple servlet and provide that servlet with the mapping you need to allow bookmarking/refreshing on. From here your servlet does nothing but:
request.getRequestDispatcher("/index.html").forward(request, response);
That should take care of it.
I had a similar problem. The reason is that the virtual URLs used in Angular routing are treated as files by Tomcat, hence the 404 when the file doesn't exist. I solved it with
URL rewriting.
I have had this problem and I tried many options to solve it without really getting a clean solution I wanted. I wanted to serve my index.html file without a template engine. But when I did I kept getting the 404 when I refreshed. The reasons is because the application is not tracking your paths correctly. Well it is doing it correctly but not the way you want.
For me my solution was npm install hbs. Using handlebars as a template engine aloud me to create one index.hbs page then hand the app off to angular2. I only use it for that one page and for whatever reason that gives me the functionality I want for refreshing without getting the 404.
If you want to take that route just add it to the app.js and create a new index.hbs file. Then add it to the template engine like this,
// view engine setup
app.set('views', path.join(__dirname, 'public'));
app.set('view engine', 'hbs');
The other route is to use the HashBang method, You can see information about that at this answer here,
I do not like that route because it adds hashtags to the url which causes other annoying problems. I found the most clean method to just use handlebars. Basically you just have to change your current index.html file to .hbs and then add it to your app.js file as the app engine. Just make sure your path it correctly so it knows where to find it.
Tomcat has a built-in solution for this.
This should work for any single-page-app framework that has UI-routing like Angular, React, ExtJS, etc.
In a nutshell:
1) Add a RewriteValve to
webapps/{your-web-app-directory}/META-INF/context.xml
<?xml version="1.0" encoding="UTF-8"?>
<Context>
<Valve className="org.apache.catalina.valves.rewrite.RewriteValve" />
... your other context items
</Context>
2) Add rewrite rules for all routes at /webapps/{your-web-app-directory}/WEB-INF/rewrite.config
For example if you have UI routes for "user", "home" and "contact" defined in your Angular app:
RewriteRule ^/user(.*)$ /index.html [L]
RewriteRule ^/home(.*)$ /index.html [L]
RewriteRule ^/contact(.*)$ /index.html [L]
These simple rules tell Tomcat to send all requests with these three named paths straight to index.html.
But the rules can get much fancier, like sending all requests to index.html except a certain path e.g. for /api calls that have to go somewhere else. The linked text above covers all the details.
I have a Joomla site running on Apache and Ubuntu 12.04. I wanted to show a custom 404 pages to be shown when a 404 error occure. I have made necessary changes to error.php file in my template directory to redirect it to '/404' directory where I have an index.html file with many images,css and java script.
Now when accessing a non-existent page, Joomla is redirecting me to root/404 but there I get a 403 Forbidden error from appache. The 404 directory is located inside 'htdocs' directory of Joomla installation.
Additional info:
1. I don't want to convert my 404 page into a Joomla template or article.
2. I am using a Joomla AMI from Bitnami on Amazon web service
If you redirect to a 404 page, you corrupt the error mechanism. The client will never get that 404 status, but a 200 on successful redirect to your error page.
Instead, you should modify your template's error.php to
send the 404 Not Found header
directly send the error page using readfile()
You might have to adjust the asset paths within your error page.
That's totally wrong, working with static pages does not mean that you have to overcome Joomla's routing.
You should either override the error Page view or use custom error pages.
Take a look at Joomla's documentation.http://docs.joomla.org/Custom_error_pages
Nibra was totally right about breaking the mechanism but still using a readfile() seems as an overkill.