Uncaught (in promise) Error: Request failed with status code 404 at createError (createError.js:

简介: Uncaught (in promise) Error: Request failed with status code 404 at createError (createError.js:

记录一个报错:Uncaught (in promise) Error: Request failed with status code 404 at createError (createError.js:16:1) at settle (settle.js:17:1) at XMLHttpRequest.onloadend (xhr.js:66:1)


1.场景描述

当前端正常运行,后端也正常运行时。前端输入账号密码登录,无反应(指并未弹出密码或账号错误等信息),且在后端控制面板上也没任何响应。怀疑前后端并没有连通,在登录页面,右键检查,前端控制台出现如下报错:


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


createError.js:16 Uncaught (in promise)


Error: Request failed with status code 404


at createError (createError.js:16:1)


at settle (settle.js:17:1)


at XMLHttpRequest.onloadend (xhr.js:66:1)


通过搜索这个错误,得到以下解决方法,逐个测试发现无果。

2.尝试过的解决办法

随之采用postman调用接口请求发现,前端端口号是8080,而后端端口号是8888。因此登录时,没响应。根据更加具体的描述问题,得到以下方法:


如果在启动前端项目时遇到无法登录的问题,导致页面报错404可能是由于以下几个常见原因引起的:


  1. 前端路由配置错误:检查前端项目中的路由配置是否正确。确保登录页面的路由地址与实际访问的地址匹配。


  1. 后端服务不可用:前端项目在尝试登录时需要调用后端服务验证用户身份。如果后端服务不可用或者接口地址配置错误,可能导致登录失败并返回404错误。


  1. 跨域请求问题:如果前端项目和后端服务部署在不同的域名或端口下,可能会存在跨域请求问题。确保后端服务已经允许来自前端项目的跨域请求。


  1. 静态资源路径问题:检查前端项目中静态资源的路径配置,确保登录页面所需的资源可以正确加载。


  1. 登录接口地址配置错误:确认前端项目中登录请求发送的接口地址是否正确。如果登录请求的URL地址错误,会导致404错误。


3.最终解决方案

逐一测试,发现是跨域请求问题,前端竟然没有代理。加入代理后,能正常登录。

相关文章
|
10月前
|
监控 JavaScript 前端开发
深入理解 Nuxt.js 中的 app:error 钩子
【9月更文挑战第25天】在 Nuxt.js 中,`app:error` 钩子是一个强大的工具,用于处理应用程序中的各种错误。它可以在服务器端渲染或客户端运行时触发,帮助提升应用稳定性和用户体验。通过在 `nuxt.config.js` 中定义该钩子,开发者可以实现错误页面显示、错误日志记录及错误恢复等功能,确保应用在遇到问题时能妥善处理并恢复正常运行。
126 10
|
4月前
|
缓存 JavaScript 前端开发
mapbox没有token/token失效,地图闪烁后变空白,报错Error: A valid Mapbox access token is required to use Mapbox GL JS.
本博客介绍了mapbox如何去除token验证,暴力破解mapbox的token验证机制。一劳永逸解决mapbox地图闪现一下然后变成空白,报错Error: A valid Mapbox access token is required to use Mapbox GL JS.的方法,还介绍了类似问题的具体解决思路。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
10月前
|
开发者 UED
深入理解 Nuxt.js 中的 app:error 钩子
【9月更文挑战第26天】在 Nuxt.js 中,钩子函数是在特定生命周期阶段执行代码的机制,`app:error` 钩子用于处理应用中的错误,包括服务器端和客户端渲染时出现的问题。它提供了一个集中处理错误的机制,提升了用户体验。当组件渲染过程中出现错误时,`app:error` 钩子会被触发,可以在 `nuxt.config.js` 文件中定义该钩子。通过分析错误对象 `err` 和上下文信息 `context`,开发者可以更好地处理各种错误情况。相比组件内的 `try/catch` 或浏览器原生错误处理,`app:error` 提供了更全局和有针对性的错误处理方式。
130 6
|
11月前
Crypto-JS——Uncaught Error: Malformed UTF-8 data
Crypto-JS——Uncaught Error: Malformed UTF-8 data
828 0
|
11月前
|
前端开发 JavaScript
VUE——Uncaught (in promise) TypeError: Cannot read property '__esModule' of undefined
VUE——Uncaught (in promise) TypeError: Cannot read property '__esModule' of undefined
252 0
|
JavaScript API
若依没解构送post请求出现的bug,vue.runtime.esm.js:620 [Vue warn]: Error in mounted hook: “TypeError: (0 , _inde
若依没解构送post请求出现的bug,vue.runtime.esm.js:620 [Vue warn]: Error in mounted hook: “TypeError: (0 , _inde
|
前端开发 开发者
解决Edge输入document.querySelector(‘video‘).playbackRate = 2.5视频无法加速的问题,‘Uncaught (in promise) TypeErro’
解决Edge输入document.querySelector(‘video‘).playbackRate = 2.5视频无法加速的问题,‘Uncaught (in promise) TypeErro’
|
运维 JavaScript Devops
阿里云云效操作报错合集之node.js构建时,报错:The build failed because the process exited too early.该怎么办
本合集将整理呈现用户在使用过程中遇到的报错及其对应的解决办法,包括但不限于账户权限设置错误、项目配置不正确、代码提交冲突、构建任务执行失败、测试环境异常、需求流转阻塞等问题。阿里云云效是一站式企业级研发协同和DevOps平台,为企业提供从需求规划、开发、测试、发布到运维、运营的全流程端到端服务和工具支撑,致力于提升企业的研发效能和创新能力。
|
JavaScript 前端开发
Code optimization and organization in Javascript / jQuery
This article is a combined effort of Innofied Javascript developers Puja Deora and Subhajit Ghosh) We have been working on a project for past 8 months (ongoing).
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
206 2