【发布时间】：2021-09-27 08:14:51
【问题描述】：
我有一个在 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, 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"/>
并创建一个我添加到 Catalina/localhost/ 的 rewrite.config 文件 有了这个信息：
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 的帮助！！
【问题讨论】：
-
嗨，Michal，谢谢，但这些服务器配置都不适合我，因为我使用的是 tomcat 而不是 apache。
-
抱歉，对 Java 不太了解 - 认为 TomCat 运行在 Apache 后面...
-
medium.com/@nithin.biliya/… - 它适用于 Angular，但没关系，因为问题是一样的......
-
嗨@MichalLevý，当按照说明修复该链接中的深层链接问题时，它可以工作。我现在可以访问直接链接，而不会在控制台中收到任何错误消息，但是现在我的数组上出现了一个无限循环，它是通过 vuex 填充的。有什么想法吗？
标签： vue.js tomcat http-status-code-404 router browser-history