nuxt.js项目访问报错:NuxtServerError Request failed with status code 404

分类:计算机 | 前端 | Vue | SSR服务端渲染 | Nuxt.js框架 | 综合 302
更新:2022-04-02 23:01:45
编辑

参考资料

https://forum.vuejs.org/t/have-a-axios-error-request-failed-with-status-code-404-in-createerror/39120

1 异常说明

最近在新的电脑上部署我的网站,运行前端nuxt.js项目成功后,访问首页时报错“NuxtServerError Request failed with status code 404”,如图所示:

在node.js启动的命令行窗体中也有相应的报错,如图所示:

2 异常分析

从报错的字面意思来看,我猜测应该是nuxt.js请求的后台服务出问题了,我现在的前端代码是在本地运行的,调用的后台服务也是本地运行的,但是如果以本地运行的前端代码调用云服务器上的后台服务(云服务器的服务因为是有网站在正常运行,所以云服务器的后台服务应该是正常的)的话页面是可以正常访问的,那么这样就证明了我本地运行的后台服务是存在问题的。

3 异常解决

nuxt.js项目使用了请求代理,nuxt.config.js中的配置如下:

proxy: [
    ['/chaoqianit', { target: 'http://127.0.0.1:8091' }]
]

在后台服务中使用了Shiro作为权限管理控制框架,其中Shiro过滤器配置中有一个配置项:

filterChainDefinitionMap.put("/chaoqianit/**", "anon");

但是我发现现在这行代码被注释掉了,那这样的话前端发送发送过来的包含"chaoqianit"的请求就不能被shiro的过滤器放行了,会被拦截住,因此导致了上面的异常发生。

于是我把上面的那行代码的注释放开,重新运行后台服务,再次访问前端页面,就正常了。