In vue project when i go to product detail page from home page it works, but when i reload the product detail page, it returns 404, also when i access the product page directly it return 404. It works only when i go by clicking on product.
This issue is on production (server) only. In localhost it is working perfectly.
When i add this to htaccess it works but home page comes first for a second.
<IfModule mod_negotiation.c>
Options -MultiViews
</IfModule>
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
I am new to vuejs. Hope someone can help with this. Thanks.
I used async and await and it worked for me.
async fetch() {
await axios.get();
}
Related
I am attempting to deploy a multipage vue3 frontend to an application. It works fine in development mode, but in production, when I attempt to navigate to a url via the search bar -- e.g. https://mywebsite.com/customers, I get a 404.
I am able to fix this by redirecting to the homepage using the suggestion on vue-router's documentation, but then it just goes to the homepage rather than showing the actual page I would like to visit. Is there some way around this that I am missing? An additional step or does this suggest I am misconfiguring this somehow?
I solved this by setting up the server. You need to understand what server you have installed. Go to config update and restart the server.
Here are the Server Configurations
Apache
<IfModule mod_negotiation.c>
Options -MultiViews
</IfModule>
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
nginx
location / {
try_files $uri $uri/ /index.html;
}
The homepage/base url of the app can be refreshed with no issues. but other pages return 404 on page refresh. Please are there any work around for this?
Here is a screenshot of the 404.
[1]: https://i.stack.imgur.com/lc8xD.png
It happens because Vue routing is only on the frontend side. So when you refresh the page it goes backend server. And it checks for any files to satisfy the request.
To solve this issue. You have to tell your apache webserver to handle it for your front end Vue app.
Try adding this to your .htaccess:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
The solution that worked for me:
In /etc/apache2/sites-available/"yourAppDomain".conf add to the end:
FallbackResource /index.html
</VirtualHost>
Page refresh returns 404 error VueJs (mode:history) with Laravel:
The solution that worked for Laravel:
Assuming your entry point is the index method, you just need to add this route at the bottom of your routes/web.php file.
Route::get('{any}', function () {
return view('welcome');
})->where('any','.*');
I'm hosting my React app on hostgator which uses Apache. In order to enable refreshing of the page without getting 404 not found I need to create and edit an .htaccess file which looks like this right now:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule . /index.html [L]
</IfModule>
What happens when I refresh the page on a subpage (/some-sub-page) is the index.html renders but the URL resets to root.com (without the /some-sub-page).
I want the index.html to render, but I also want to keep the url in order for React Router to kick in and serve the correct components.
I've gone through the Apache documentation as well as threads about .htaccess editing but none seems to cover the problem with the URL resetting.
How would one go about that?
Best regards.
I've been trying to setup CakePHP on a development section of my server and I can't seem to solve the "URL rewriting is not properly configured on your server" error. I suspect I'm not configuring the .htaccess files with the correct RewriteBase. I've tried a wide variety of different RewriteBase for each file, but I can't seem to hit the right ones, and Cake doesn't give me any information other than "not working" (URL rewrite errors don't end up in Cake's error log).
I do not have access to my httpd.conf file, but I've used .htaccess and mod_rewrite with other frameworks (Wordpress and CodeIgniter) without a problem.
My base url for the site is: http://dev.domain.com/cake/
My base server path is: /home/username/public_html/dev/cake/
Cake root .htaccess:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /cake
RewriteRule ^$ app/webroot/ [L]
RewriteRule (.*) app/webroot/$1 [L]
</IfModule>
Cake app directory .htaccess:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /cake/app
RewriteRule ^$ webroot/ [L]
RewriteRule (.*) webroot/$1 [L]
</IfModule>
Cake webroot directory .htaccess:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /cake/app/webroot
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ index.php?/$1 [QSA,L]
</IfModule>
Did you create a new default.ctp layout file and then "URL rewriting is not properly configured on your server." appeared?
If that is the case, it happened to me. It's working just fine. I think Cake is throwing a bad error message here.
Problem is with CSS.
If U don't make page on default layout of cake, and in your new layout You dont have default css: cake.generic.css it will show this error on page home.ctp. Look in code of home.ctp (View/Pages) and look - the id="url-rewriting-warning" of <p> where this error message is have in cake.generic.css value of display:none.
What does your vhost.conf look like? If you have a proper path in DocumentRoot, you shouldn't need to specify RewriteBase in .htaccess at all. Just stick with the defaults.
Try DocumentRoot /home/username/public_html/dev/cake/app in vhost, and remove RewriteBases from your .htaccess.
The problem for me was the css issue mentioned in another answer.
If you changed the css file in the default layout, you might need to add the following lines
to your new css file:
#url-rewriting-warning {
display:none;
}
... as long as rewriting appears to be working in all other ways.
.htaccess
<IfModule mod_rewrite.c>
Options +FollowSymLinks
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ ./rewrite.php?p=$1&%{QUERY_STRING} [L]
</IfModule>
rewrite.php
<?php
print_R($_GET);die;
?>
This works properly on my local comp and on many other servers. But on a godaddy server there is an issue.
URL like this gets successfully processed
site.com/search/action/browse
Array ( [p] => search/action/browse )
But this URL has a problem
site.com/index/country/United-States
Array ( [p] => missing.html )
There is no index/ directory in the site root. There is an index.php file though. I tried to go through godaddy control panel but didn't find anything related to missing.html. Please let me know your thoughts because I am running out of ideas.
LazyOne: you are a legend: Ive had this issue for months and the wonderful "Options -MultiViews" saved me.