Vue router 4 - 404 error page when page is refreshed - wordpress

I'm working on a wordpress headless theme using vue 3.
I've implemented vue router and it seems working correctly when the page is loaded, but I've noticed that when the user change the route and refresh the page, a 404 error page will be displayed to the user.
This is the code I have in my router file
import { createRouter, createWebHistory } from 'vue-router'
//
import UserLanding from '../components/UserLanding.vue'
import UserRegistration from '../components/UserRegistration.vue'
const router = createRouter({
history: createWebHistory(window.location.pathname),
routes: [
{
name: 'UserLanding',
path: '/',
component: UserLanding
},
{
name: 'UserRegistration',
path: '/registration',
component: UserRegistration
}
]
})
export default router
# BEGIN WordPress
# Le direttive (linee) tra `BEGIN WordPress` e `END WordPress` sono
# generate dinamicamente, e dovrebbero essere modificate solo tramite i filtri di WordPress.
# Ogni modifica alle direttive tra questi marcatori verrĂ  sovrascritta.
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /wpdev/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /wpdev/index.php [L]
</IfModule>
# END WordPress
<IfModule mod_rewrite.c>
Options All -Indexes
</IfModule>
Is there any way to make the things working as expected? Do I need to do a particular configuration on .htaccess or in WP functions file of the theme to avoid that when the page is reloaded the error occur?
Why vue router will not reload the desired route?

Wou need to do is add a simple catch-all fallback route to your server. If the URL doesn't match any static assets, it should serve the same index.html page that your app lives in. Beautiful, again!
Check the Example Server Configurations to do it for your server.

Related

CSS, img, and favicon not loading in CodeIgniter 4, is it my htaccess?

I am very new to CodeIgniter and .htaccess protocols so bare with me. None of the assets in my assets folder are loading. Including the favicon. I have 3 errors when I inspect the home.php page but all of the file paths appear to be correct.
I fear the issue could lie in my .htaccess file at the root of my project. This is my directory structure:
App/
Views/
pages/
home.php
public_html/
.htaccess
assets/
css/
light-theme.css
img/
shapes-background.jpg
index.php
favicon.ico
My controller App\Controllers\Home.php
class Home extends BaseController
{
public function index()
{
$data['title'] = 'Home';
echo view('templates/index_header', $data);
echo view('pages/home');
echo view('templates/footer');
}
public function view($page = 'home')
{
if (! is_file(APPPATH . 'Views/pages/' . $page . '.php')) {
throw new \CodeIgniter\Exceptions\PageNotFoundException($page);
}
$data['title'] = ucfirst($page);
echo view('templates/index_header', $data);
echo view('pages/' . $page, $data);
echo view('templates/footer', $data);
}
}
This is my .htaccess file:
# Disable directory browsing
Options All -Indexes
# ----------------------------------------------------------------------
# Rewrite engine
# ----------------------------------------------------------------------
# Turning on the rewrite engine is necessary for the following rules and features.
# FollowSymLinks must be enabled for this to work.
<IfModule mod_rewrite.c>
Options +FollowSymlinks
RewriteEngine On
# If you installed CodeIgniter in a subfolder, you will need to
# change the following line to match the subfolder you need.
# http://httpd.apache.org/docs/current/mod/mod_rewrite.html#rewritebase
# RewriteBase /
# Redirect Trailing Slashes...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} (.+)/$
RewriteRule ^ %1 [L,R=301]
# Rewrite "www.example.com -> example.com"
RewriteCond %{HTTPS} !=on
RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
RewriteRule ^ http://%1%{REQUEST_URI} [R=301,L]
# Checks to see if the user is attempting to access a valid file,
# such as an image or css document, if this isn't true it sends the
# request to the front controller, index.php
RewriteEngine on
RewriteCond $1 !^(index\.php|assets|img|js|css|content|uploads|profile|favicon.ico|light-theme.css|)
RewriteCond %(REQUEST_FILENAME) !-f
RewriteCond %(REQUEST_FILENAME) !-d
RewriteRule ^(.*)$ ./index.php/$1 [L]
# Ensure Authorization header is passed along
RewriteCond %{HTTP:Authorization} .
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
# Allow phpmyadmin access
RewriteCond $1 !^(phpmyadmin|index\.php|images|robots\.txt)
RewriteRule ^(.*)$ /index.php/$1 [L]
</IfModule>
<IfModule !mod_rewrite.c>
# If we don't have mod_rewrite installed, all 404's
# can be sent to index.php, and everything works as normal.
ErrorDocument 404 index.php
</IfModule>
# Disable server signature start
ServerSignature Off
# Disable server signature end
Here is how I reference my css file:
<!-- Stylesheet file -->
<link rel='stylesheet' type='text/css' href='<?= base_url('assets/css/light-theme.css?version=51'); ?>' charset='utf-8'>
And here is how I reference an image to display:
<img src="<?= base_url(); ?>img/shapes-background.jpg" alt='Various Shapes'>
My baseurl is set inside App/Config/App.php:
public $baseURL = 'http://localhost/Shape_Search/index.php/';

wordpress adds -s to http automatically

I am using a webservice for finding ip's country info.When I use below code , wordpress automatically redirect "http://api.wipmania.com/jsonp?callback=jsonpCallback" to " https://api.wipmania.com/jsonp?callback=jsonpCallback " and give this error."GET https://api.wipmania.com/jsonp?callback=jsonpCallback net::ERR_CERT_REVOKED"
why worpress adds -s to my link.
how to fix this error.
Note: It works on Mozilla but at Chrome it does not work.
thank you.
<script type="text/javascript">
function jsonpCallback(data) {
console.log (data);
}
</script>
<script src="http://api.wipmania.com/jsonp?callback=jsonpCallback"
type="text/javascript"></script>
htaccess
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{HTTPS} !=on [NC]
RewriteRule ^(.*)$ https://%{HTTP_HOST}/$1 [R=301,L]
</IfModule>
# END rlrssslReallySimpleSSL
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
check for this meta in your website source
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
Practically this redirect all http request to https, some SSL plugin for wordpress add this automatically or by setting an option.
I used this code for a similar situation. I am not sure if it will help for yours though.
function fix_https_link($url, $path, $orig_scheme, $blog_id){
$ssl_enabled = false;
$options = get_blog_option($blog_id, "rlrsssl_options");
if ($options && isset($options)) {
$site_has_ssl = isset($options['site_has_ssl']) ? $options['site_has_ssl'] : FALSE;
$ssl_enabled = isset($options['ssl_enabled']) ? $options['ssl_enabled'] : $site_has_ssl;
}
if (!$ssl_enabled) {
$url = str_replace("https://","http://",$url);
}
return $url;
}
add_filter( 'home_url', 'fix_https_link' , 10,4);

Wordpress/Lumberjack - 404 page displayed when trying to access route

I'm getting started using Bedrock and Lumberjack and I'm trying to simply get a "Hello World" example working. So far no success. I've added a couple of routes and created a controller but whenever I go to example.com/Test or /hello-world I get a 404 error.
Can anyone help me resolve this?
Within my Wordpress theme routes.php file I have:
<?php
use Rareloop\Lumberjack\Facades\Router;
use Zend\Diactoros\Response\HtmlResponse;
Router::get('Test', function () {});
Router::get('hello-world', function () {
return new HtmlResponse('<h1>Hello World!</h1>');
});
I also created a test controller:
<?php
namespace App\Http\Controllers;
use Rareloop\Lumberjack\Http\Controller as BaseController;
class TestController extends BaseController
{
public function __construct()
{
add_filter('wp_title', function ($title) {
return 'TEST TITLE';
});
}
public function show()
{
return 'Hello World';
}
}
I had the same issue and I resolved it by including an .htaccess in the root of my project folder with the following content:
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]

Wordpress Mod rewrite

I am trying to add a rule to wordpress so that anything like /src/test becomes /src?urn=test with the following rule.
add_action('init', 'add_src_url');
function add_src_url()
{
add_rewrite_rule(
'^src/([^/]*)$',
'src/urn=$matches[1]',
'top'
);
}
Content of .htaccess file:
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress
The above is not working. Mod Rewrite is enable. Is there any problem with the code ?
Try like below and let me know:
/* Add rewrite rule */
function hotel_add_rewrite_rules() {
add_rewrite_tag('%{custom_data_var}%', '([^/]*)');
add_rewrite_rule('^{custom_name}/([^/]*)/?$', 'index.php?pagename={page_name}&{custom_data_var}=$matches[1]', 'top');
}
add_action('init', 'hotel_add_rewrite_rules');

Wordpress rewrite a url

I want to rewrite http://website.com/?slug=product_info.php&products_id=32 to http://website.com/product_info/32 and I use this code,
add_filter('rewrite_rules_array','wp_insertMyRewriteRules');
add_filter('query_vars','wp_insertMyRewriteQueryVars');
// Adding a new rule
function wp_insertMyRewriteRules($rules)
{
$newrules = array();
$newrules['(product_info)/(\d*)$'] = 'index.php?pagename=store&slug=product_info.php&products_id=$matches[1]';
return $newrules + $rules;
}
// Adding the bid var so that WP recognizes it
function wp_insertMyRewriteQueryVars($vars)
{
array_push($vars, 'products_id');
return $vars;
}
I also used this code,
add_action( 'init', 'wpse41778_add_rewrite' );
function wpse41778_add_rewrite()
{
add_rewrite_tag('%products_id%','([^/]+)');
add_rewrite_tag('%slug%','([^/]+)');
add_rewrite_rule(
'^product_info/([^/]+)/?$',
'index.php?pagename=store&slug=product_info.php&products_id=$matches[1]',
'top'
);
}
I have manually flushed the rules but when i go to http://website.com/product_info/32 it went to http://website.com instead of the product page. Both of the codes have this kind of issue.
Here is the contents of my .htaccess,
# BEGIN WordPress
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
# uploaded files
RewriteRule ^files/(.+) wp-includes/ms-files.php?file=$1 [L]
RewriteRule ^login$ /wp-login.php [L]
RewriteRule ^signup$ /wp-signup.php [L]
RewriteRule ^register$ /wp-register.php [L]
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
RewriteRule . index.php [L]
I don't know whats the problem and Im actually newbie on this. Please help.
Rules are not flushed, add this code to flush them automatically:
add_action('wp_loaded', 'my_flush_rules');
// flush_rules() if our rules are not yet included
function my_flush_rules(){
$rules = get_option('rewrite_rules');
if (!isset($rules['(product_info)/(\d*)$'])) {
global $wp_rewrite;
$wp_rewrite->flush_rules();
}
}
and make sure your .htaccess file is writable by Wordpress

Resources