vue路由器历史记录模式重试404错误

huus2vyu  于 2021-10-10  发布在  Java
关注(0)|答案(2)|浏览(508)

我有一个vue应用程序,在tomcat中运行历史记录模式。当访问www.mywebapp.com/faq或mywebapp.com/other或../post/99等网站时,它首先似乎工作正常。刷新页面似乎也很好。
但是,当在浏览器控制台中仔细查看时,我看到了一条错误消息。

"Failed to load resource: the server responded with a status of 404 ()"

页面在重定向我并加载页面之前的一瞬间返回404错误。
在非常慢的互联网连接上,404错误在加载之前会存在更长的时间。
有人知道我在这里错过了什么吗?我添加了以下代码来尝试处理它,但没有成功。
我的路由器如下所示:

export const router = new Router({
  mode: 'history',
  base: '/',
  routes: [
  {
  name: 'home',
  path: '/',
  component: Home
  },
  ....,
  {
   path: '*',
  component: ErrorLanding,
  name: 'NotFound'
  },
  ],
  scrollBehavior(to, from, savedPosition) {
      return {x:0, y: 0}
  }
  });
  router.beforeEach((to, from, next) => {
   const publicPages = ['/', '/login', '/register', 
       '/help', '/ticket', '/about' ];
   const authRequired = !publicPages.includes(to.path);
   const loggedIn = localStorage.getItem('user');
    const redirect = to.path;

   if (authRequired && loggedIn === null) {
    if(to.meta.authRequired === false) {
      next();
    }
    else
    next({ name: 'Login', query: { redirect: redirect } });

    } else {
    next();
    }
   });

我的vue.config.js如下所示:

module.exports = {
   devServer: {
   port: 80,     
   proxy: "http://localhost/*"
   },
   publicPath: process.env.NODE_ENV === 'production'
   ? '/'
   : '/'
   }

最后,我在dist/root/web-inf/中有一个web.xml文件,代码如下:

<?xml version="1.0" encoding="ISO-8859-1"?>
   <web-app xmlns="http://java.sun.com/xml/ns/javaee" 
   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
   xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
   http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" 
   version="3.0" 
   metadata-complete="true">
  <display-name>my app</display-name>
  <description>
     this is my app description
  </description>
  <error-page>  
   <error-code>404</error-code>  
   <location>/</location>  
  </error-page>  
</web-app>

更新
当我将这行代码添加到server.xml时

<Valve 
   className="org.apache.catalina.valves.rewrite.RewriteValve"/>

然后创建一个rewrite.config文件,并将其添加到catalina/localhost/中,其中包含以下信息:

RewriteCond %{REQUEST_PATH} !-f
   RewriteRule ^/(.*) /index.html

它正在工作,我不再收到任何错误消息。但现在我有一个新问题。通过vuex填充的阵列返回无限循环。这怎么可能?
更新
我已尝试将其添加到rewrite.config文件:

RewriteRule ^/api1/ - [L,NC]
RewriteRule ^/api2/ - [L,NC]
RewriteRule ^/api3/ - [L,NC]
RewriteRule ^/api4/ - [L,NC]
RewriteRule ^/api5/ - [L,NC]
RewriteRule ^/api6/ - [L,NC]
RewriteCond %{REQUEST_PATH} !-f
RewriteRule ^/(.*) /index.html

必须将下面解决的更新添加到rewrite.config文件中。

RewriteRule ^/myapi1/.* - [L,NC]
 RewriteRule ^/myapi2/.* - [L,NC]
 RewriteRule ^/myapi3/.* - [L,NC]
 RewriteRule ^/myapi4/.* - [L,NC]
 RewriteRule ^/myapi5/.* - [L,NC]
 RewriteRule ^/host-manager/.* - [L,NC]
 RewriteRule ^/manager/.* - [L,NC]
 RewriteCond %{REQUEST_PATH} !-f
 RewriteRule ^/(.*) /index.html

非常感谢@michal levy的帮助!!

uubf1zoe

uubf1zoe1#

@michal Levy的回答是正确的,只是对我的案例做了一些小的调整。要解决此问题,必须将以下内容添加到rewrite.config中。

RewriteRule ^/myapi1/.* - [L,NC]
  RewriteRule ^/myapi2/.* - [L,NC]
  RewriteRule ^/myapi3/.* - [L,NC]
  RewriteRule ^/myapi4/.* - [L,NC]
  RewriteRule ^/myapi5/.* - [L,NC]
  RewriteRule ^/host-manager/.* - [L,NC]
  RewriteRule ^/manager/.* - [L,NC]
  RewriteCond %{REQUEST_PATH} !-f
  RewriteRule ^/(.*) /index.html
6pp0gazn

6pp0gazn2#

这个问题是使用vue路由器历史模式的结果,在文档中有很好的描述
使用历史记录模式时,url将看起来“正常”,例如。http://oursite.com/user/id. 然而,问题来了:由于我们的应用程序是一个单页客户端应用程序,没有正确的服务器配置,如果用户访问我们的应用程序,就会出现404错误http://oursite.com/user/id 直接在他们的浏览器中。要解决此问题,您只需向服务器添加一个简单的全面回退路由。如果url与任何静态资产都不匹配,它应该提供与应用程序所在的index.html页面相同的服务。
还有很多例子说明了如何在很多服务器上实现这一点,而不是tomcat tho。。。
要在tomcat中配置“spa回退”(通用名称),您必须:
在中配置重写阀 server.xml 编辑 ~/conf/server.xml 在主机段内添加以下阀门,如下所示:

<Host name="localhost"  appBase="webapps" unpackWARs="true" autoDeploy="true">
  <Valve className="org.apache.catalina.valves.rewrite.RewriteValve" />
</Host>

在中写入重写规则 rewrite.config 创建目录结构- ~/conf/Catalina/localhost/ 并创建 rewrite.config 文件中包含以下内容:

RewriteCond %{REQUEST_PATH} !-f
RewriteRule ^/(.*) /index.html

来源
注意:注意上面的重写规则会导致服务器返回 index.html 对于与“常规文件”不匹配的任何请求(请参阅重写阀门文档)。所以,如果您的服务器还提供某种api(例如rest),则需要修改重写规则,以避免将请求重写到api。
例如,如果您的api在 /api/... ,您的重写规则应如下所示:


# match any URL starting with `/api/`, do not rewrite and don't process other rules...

RewriteRule ^/api/ - [L]
RewriteCond %{REQUEST_PATH} !-f
RewriteRule ^/(.*) /index.html

相关问题