Error 404 in angular project when key up ctrl+F5 [duplicate] - javascript

This question already has answers here:
AngularJS routing 404 error with HTML5 mode
(3 answers)
Closed 3 years ago.
I've an angular project and i published my website in domain https://rataport.com.
In this domain when I clicked on products and key up crrl+F5 404 page show (https://rataport.com/products/category/7441).
What could be the reason?

Angular doesn't have physical pages representing those routes but updating the history and the URL using Javascript.
You can start browsing from the root (/) and make your way to those pages but since there aren't any files or redirections set up on your web server, Angular cannot catch requests coming directly to the said URL.
If you're using Apache Server, you can use following htaccess configuration to direct requests to angular index.html file.
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^.*$ - [NC,L]
RewriteRule ^(.*) index.html [NC,L]
</IfModule>

Related

is there an way to run towice vue apps in one index.html First vue Version is 3 and second vue app version is 2

I created two apps with vue framework, and i want to combine them together in one directory to be like this:
https://host.com/ => runs first vue app EX: Website Store.
https://host.com/admin => runs second vue app EX: Dashboard of the website.
can i find any way to do this ??
i tried to put dashboard build in ./admin/index.html and wbsite in ./index.html
but when i run it website works well but the admin path giving me Error 404 he can't find some chuncks
you should change your .htaccess file in your subdirectory so be able to run vue app on it. I don't think vuejs version matter !
if your subdirectory is admin you should use this config (in yourdomain.com/admin/.htaccess file) :
<ifModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . admin/index.html [L]
</ifModule>

Locked out of wordpress admin wp-admin while trying to activate https manually [duplicate]

My word press installation resides in public_html/cushbu folder
and it will be accessed by www.example.com/cushbu so i have changed the base url's in wp-config.php
define('WP_HOME','http://www.example.com/cushbu/');
define('WP_SITEURL','http://www.example.com/cushbu/');
Also i've edited this line .htaccess file
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?domain.com/cushbu/ [NC]
the problem is i can't access the wp-admin its redirected to old url
So how can i completely change the base url??
Change the url in your database table called wp_options field's home url and site url. Change it to your new url.
outside of cushbu folder, in public_html folder, you should have .htaccess file modify that file with the following line.
# Redirect Trailing Slashes...
RewriteEngine On
RewriteBase /
RewriteCond $1 !^(cushbu)
and WordPress source has .htaccess file edit like this
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /cushbu/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /cushbu/index.php [L]
</IfModule>
You need to change the site URL and home URL in the database too. Its in the wp_options table. I hope you have database access.
Cheers!
Follow simple steps to replace in core database url
1) You need to export your old database to local computer
2) Notepad++ editor or some other editor tool. replace (cntrl+H) in notepad++
3) First Find http://www.example.com/cushbu/ and Replace with new URL eg. http://www.newexample.com/cushbu/
4) Second Find without http www.example.com/cushbu/ and Replace with new URL eg. www.newexample.com/cushbu/
5) Final find any old url is present or not.if yes than replace by new url and save.
6) Import new replaced database to old database and login by wp-admin and click on Settings / Permalinks now it's done.

How to deploy Nuxt.js in SPA mode on server properly?

I use Nuxt.js in SPA mode in my project. But I can't properly deploy it in my server (Apache). Has anyone had that experience?
I think that the problem is in trailing slash in URL tried to set DirectorySlash Off in my .htaccess, but then it just doesn't work.
Also tried
Does not help as well:
DirectorySlash Off
#removing trailing slash
RewriteCond %{THE_REQUEST_FILENAME} /(.*)/( |$|?)
RewriteRule ^(.*)/$ $1 [R=301,L]
# internally add the slash back
RewriteCond %{REQUEST_FILENAME} -d
RewriteCond %{REQUEST_URI} !/$
RewriteRule ^(.*)$ /$1/ [L]
My project is on http://4dea.ru/works/TEST/spc/ now. If you push the button (in the section with the picture of the man on the boat on background) you will go to http://4dea.ru/works/TEST/spc/morskie-konstrukcii and everything works fine. But if you refresh the page, some pictures are missing (in the header, for example).
On the local server (Node.js) everything works fine.
Figured out two ways to do that:
1. Instead of href="image.png" use href="/image.png", so the path to the image will be absolute and accessible from every page. But this option doesn't work if the app is not located in the root directory (like in my case).
2. Load images from assets folder via href="#/assets/image.png". For styles and dynamic paths :style="{backgroundImage: ``url('${require('#/assets/boat.jpg')}')``}" can be used.
Hope it helps you ^^

Forcing a specific page to use HTTPS with angularjs

In our application we have a payment page that we want to use SSL on because we are handling credit card information. We've already put in place rewrite rules for apache to redirect a request to the specific page to HTTPS -- which takes care of any direct requests to the payment page ( http://oursite.com/pay ).
However most navigation in our site is done via relative urls and states using ui-router in angularjs and we have found that apache does not catch these requests and so serves the page without SSL.
EX If a user clicks a link with ui-sref='pay' ui-router loads the template and refreshes the state -- at no point is a request made to the server for a new uri so apache can't redirect to https
Is there a way to force ui-router(or angular in general) to force a state to use HTTPS without having to change all links to reload the entire site?
Of course this may also be a shortcoming in our rewrite rules...Here's what we have so far
RewriteEngine on
RewriteCond %{HTTPS} !=on
RewriteCond %{REQUEST_URI} /pay
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
RewriteRule ^ index.html [L]
The second set of rules is to enforce html5mode for our app.
RewriteCond %{REQUEST_FILENAME} !-f is in place so that angular can fetch the payment template for the state without needing SSL. Is this okay?
I had a similar problem, although was using $routeProvider in a SPA application. What I did was to enforce a redirect inside the controller:
var forceSSL = function () {
if ($location.protocol() !== 'https') {
$window.location.href = $location.absUrl().replace('http', 'https');
}
};
forceSSL();
This though does reload all resources. However, this happens only once when switching to SSL mode.
Note, the function is actually in a service so can be called from anywhere.
I hope this helps.

Enabling HTML 5 Mode in AngularJS 1.2

I'm working on an app that needs to use HTML 5 mode. Due to the fact that I am migrating an existing site to use AngularJS 1.2, I cannot have '#' tags in my URL. Currently, I have the following:
angular.module('myApp', ['ngRoute']).
config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when("/home", {templateUrl:'home.html', controller:'homeController'})
// other routes are defined here..
.otherwise({redirectTo: '/home'});
}]);
Unfortunately, when I visit 'http://myServer/home', my app does not work when html 5 mode is enabled. I get a 404. However, when I visit http://myServer/ it works. Its like deep-linking doesn't work when I have html5 mode enabled. If I comment out the line that says "$locationProvider.html5mode(true);", the site functions. However, once again, I cannot have hash tags in my URL due to the fact I'm migrating an existing site.
Am I misunderstanding how html5mode(true) works? Or, am I doing something wrong?
Thank you
If you're using html5mode you need make changes on the server side to return your entry point index.html (main app page) on any URL request. Then angular app will parse URL and load needed page.
Here's a list of solutions for most common web servers: Apache, nginx, IIS and express.
https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#wiki-how-to-configure-your-server-to-work-with-html5mode
The link is in ui-router's wiki, but it has nothing to do with it, this answer is valid with ngRoute.
I had a similar problem while setting up my app. I was trying to implement pretty URLs as the # in the URL was very disturbing. This is how I solved the problem.
Step 1: Inject the location provider in your app module and set html5mode to true
$locationProvider.html5Mode(true);
Step 2: Insert the base tag in your index.html
Some people say this is not required but I got an error when I tried removing the tag and implementing the same. It says locationProvider requires a base tag.
<base href="/specify-app-directory-here/">
If it is in the root, the following line will suffice
<base href="/">
Step 3: You will need to setup URL rewritting on your server. I, myself am a beginner but found it quite simple. If you are using an Apache just this is how you do it.
Create an .htaccess and place it in the same directory as your index.html, or you can even use an existing one. Add the following lines to the .htaccess
Options +FollowSymLinks
RewriteEngine On
RewriteBase /base-as-specified-in-base-tag/
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([a-zA-Z]+)$ #/$1 [NC,L]
The last line is what is very important. Basically it tells your server if it finds any links of the form "/home" it will redirect it to "/#/home" which angularJS can then handle appropriately. In doing so, it does not actually change the url displayed in the address bar and you have a pretty url. If you try reloading the page also, you will not get a 404 error.
Hope this helps.
first enable $locationProvider.html5Mode(true);
after enabling html 5 mode true you can insert
this code in .htaccess
BEGIN
Options +FollowSymLinks
RewriteEngine on
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]
RewriteRule ^(.*) your file root /index.php [NC,L]
END

Categories