I have a website that has 3 basic pages: Home, About and Contact. The website is built using AngularJS and I am using ui.router for the routing.
Everything is working OK if you click on the navigation options, but when you refresh while on one of pages, /about or /contact, it throws 403 forbidden. Same issue if you directly try to access one of these pages: http://pricebyitem.com/about
This is run on Apache 2.4 - I'm not sure what I need to configure to make the direct access work.
Website: http://pricebyitem.com
Im sure this has been answered elsewhere on StackOverfow and therefore this question should be closed.
You need to implement HTML5 pushstate in Apache. This will return your index.html for each route requested.
Options +FollowSymLinks
IndexIgnore */*
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule (.*) index.html
Related
Hey has anyone experienced issues with react-router on a production build. I'm running a LAMP server and I've built my project put it in the http folder and when I go to a page I get Object not found!. I have setup react-router to go to certain pages based on certain conditions if I go to the root of the server i.e. localhost/ it loads the main page but then if I click on links it works fine as soon as you try and manually go to a link by typing in the search box I get the error message Object not found
This is my .htaccess file
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]
</IfModule>
You need to configure your server to return index.html if file not found (404).
Example:
Let's say you have /users route the will show your users list.
It will be ok if first you'll go to / (which will return index.html by default) and then click some router link and it will redirect you to that page. It will work because you wont make any additional requests to the server.
But if you go to /users first - you'll request it from the server. In that case server will try to find users file and it will not be there.
If this configuration is not possible consider using hash router. The url will look like this /#/users
Below is the issue that I am facing and needs some help.
Initial problem:
I have a tomcat server where I have deployed three angular projects (inside the web apps folder).
When I start the Tomcat server, the angular apps come up. Once I login to the APP and navigate through the pages and then try to refresh any page inside the angular app it gives me a 404 error.
The solution to the initial problem:
I got a solution to resolve the above issue as given below:
adding the below parameter to the "server.xml" file inside the Tomcat config folder.
Parameter:-
I created a rewrite.config file inside the /config/Catalina/localhost/ folder and wrote rewrite rules for all the 3 angular apps.
New Problem:
Only one of the Angular APP is coming up but all the other application's index.html pages are not loading and in the logs I can see 304 error.
Questions: Can someone please suggest how to write multiple rewrite configs for the different angular project in the same tomcat rewrite.config file.
More Details: Angular apps are in the location:
Tomcat path/webapps/app1
Tomcat path/webapps/app2
Tomcat path/webapps/app3
rewrite.config file content:
RewriteCond %{REQUEST_PATH} !-f
RewriteRule ^/app1/(.*) /app1/index.html
RewriteCond %{REQUEST_PATH} !-f
RewriteRule ^/app2/(.*) /app2/index.html
RewriteCond %{REQUEST_PATH} !-f
RewriteRule ^/app3/(.*) /app3/index.html
Only app1 is loading but app2 and app3 index.html pages are not loading and tomcat logs have 304 for app2 and app3.
Please suggest how to write the rewrite rules for multiple angular applications.
Are you sure that just first one and not just third one is served correctly in your case? Because I think you are missing RewriteRule flag [L] ...last rule:
RewriteCond %{REQUEST_PATH} !-f
RewriteRule ^/app1/(.*) /app1/index.html [L]
RewriteCond %{REQUEST_PATH} !-f
RewriteRule ^/app2/(.*) /app2/index.html [L]
RewriteCond %{REQUEST_PATH} !-f
RewriteRule ^/app3/(.*) /app3/index.html [L]
First, I had this issue, link, and after some reading and some tests I noticed a problem with the url while refreshing the page using ui-router with html5 mode enabled.
Problem
The problem occurs when I used an extend url, for example /app/Welcome. At first, I tought it was because of the nested state, since I was only using this type of url when I had a child state. But the problem also happened when I tried to access an url with parameters. These are the url I've tested so far:
url: 'Service/Tools'
url: '/Service/Tools'
url: '/Service/:myParam'
url: '/Service/Tools/:myParam'
For all of these url, when I refresh the page there is this error:
Uncaught SyntaxError: Unexpected token <
Uncaught ReferenceError: angular is not defined
Resource interpreted as Stylesheet but transferred with MIME type text/html:
The only way I was able to refresh the page using html5mode enabled, was using a url like this: url:'/Service'.
It doesn't matter if it's a single state, nested state, abstract, etc.. If the url has more than 1 /, the error apear.
Server
I'm running this on an apache server with this rewrite rule:
<IfModule mod_rewrite.c>
RewriteEngine On RewriteBase /
Options FollowSymLinks
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
Does anyone have any idea on how to solve this?
It seems you need to provide an absolute url for your extenal resources.
Add a leading / to reasource tags href or src. This will tell browser to start at site root when making requests
We have built an application with AngularJS, it is currently hosted on a shared cPanel hosting. However, whenever we do a refresh on any page we are at with ? in the url. It will break.
I have read extensively on Stackoverflow, I understand it is because of the browser doesn't know which page to load and hence we need to set the base url in the header. We tried setting the base url and did some htaccess settings but it is still not working.
Try to click on any link from the website and refresh that page. You will notice it failed to work.
Any kind soul can point us to the right directions on how we can solve this?
Edit 1:
I have these in htaccess and notice the only url with ? will refuse to load correct.
Options +FollowSymLinks
IndexIgnore */*
RewriteEngine on
# if a directory or a file exists, use it directly
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteCond %{REQUEST_URI} !/api
# otherwise forward it to index.html
RewriteRule ^.*$ - [NC,L]
RewriteRule ^/* /index.html [NC,L]
I tried to reproduce the Issue but its not showing any # tag in the URL as mentioned. Can you please explain in details.
The issue didn't come from htaccess but the folder name. For instance,
config(function($stateProvider) {
$stateProvider.state('search', {
url: '/search?page&loc&seaters&owner&min_price&max_price',
The problem is when our folder is also call search, Apache will attempt to go to search folder first (due to the htaccess) and because they can find the folder, it will read the folder directory.
We fixed it by naming the folder example: search-html and change all the templateUrl required to search-html and it solves the issue.
When loading a page using Angular an Apache myserver.com everything works fine, when going to a subroute from the main page myserver.com/credits by clicking a link it'll work as well.
However, if I try to go directly to myserver.com/credits from the browser navigation bar it'll return a 404 error message:
I'm aware that by working with node I can configure this so that it does work, however, my company website runs in an apache server which I have no access to.
I could make it so the server redirects to the main page myserver.com like so:
.htaccess
ErrorDocument 404 /index.html
However the optimal resolution would be that going to myserver.com/credits works outright.
Is there a way to make Apache behave this way? And if so, how?
The answer that solves this question can be found here:
https://stackoverflow.com/a/22740184/1224232
I have flagged this question as a duplicate. I have tested it and it works perfectly.
Special thanks to Kevin B for directing me to the answer, and to Rajasaur for providing the answer.
Created a .htaccess file in root directory if not exist.
then add the following code in it
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
# not rewrite css, js and images
RewriteCond %{REQUEST_URI} !\.(?:css|js|map|jpe?g|gif|png)$ [NC]
RewriteRule ^(.*)$ /index.html?path=$1 [NC,L,QSA]