如何解决Vue路由器历史模式返回404错误
我有一个在 tomcat 中运行的历史模式 vue 应用程序。 当访问 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,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 的帮助!!
解决方法
问题是使用 Vue Router 的历史模式的结果,在 docs
中有很好的描述使用历史模式时,URL 将看起来“正常”,例如http://oursite.com/user/id。但是,这里出现了一个问题:由于我们的应用程序是单页客户端应用程序,没有适当的服务器配置,如果用户直接在浏览器中访问 http://oursite.com/user/id,他们将收到 404 错误。要解决这个问题,您需要做的就是向您的服务器添加一个简单的全能回退路由。如果 URL 与任何静态资源都不匹配,则它应该提供与您的应用所在的 index.html 页面相同的页面。
还有很多示例如何为许多服务器执行此操作 - 而不是 Tomcat tho...
要在 Tomcat 中配置“SPA 回退”(通用名称),您必须:
- 在
server.xml
中配置 RewriteValve
编辑 ~/conf/server.xml
以在 Host 部分中添加以下 Valve,如下所示:
<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
(请参阅 Rewrite Valve Docs)。所以如果您的服务器还提供某种 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
,
@Michal Levys 的回答是正确的,只需要为我的案例做一些小的调整。 为了解决这个问题,必须将下面的内容添加到 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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。