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.最终解决方案

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

相关文章
|
1天前
|
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
|
4天前
|
前端开发 开发者
解决Edge输入document.querySelector(‘video‘).playbackRate = 2.5视频无法加速的问题,‘Uncaught (in promise) TypeErro’
解决Edge输入document.querySelector(‘video‘).playbackRate = 2.5视频无法加速的问题,‘Uncaught (in promise) TypeErro’
|
2月前
|
iOS开发 MacOS
WAServiceMainContext.js:2 Error: MiniProgramError
WAServiceMainContext.js:2 Error: MiniProgramError
164 0
|
2月前
|
JavaScript 前端开发
FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory 内存溢出问题
FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory 内存溢出问题
39 1
|
2月前
|
Web App开发 存储 移动开发
Uncaught (in promise) DOMException: The play() request was interrupted by a new load request.异常处理
Uncaught (in promise) DOMException: The play() request was interrupted by a new load request.异常处理
132 0
|
2月前
|
前端开发 JavaScript
如何处理 JavaScript 中的异步操作和 Promise?
如何处理 JavaScript 中的异步操作和 Promise?
26 1
|
2月前
|
前端开发 JavaScript
在JavaScript中,什么是promise、怎么使用promise、怎么手写promise
在JavaScript中,什么是promise、怎么使用promise、怎么手写promise
40 4
|
2月前
|
前端开发 JavaScript 开发者
JavaScript 中的异步编程:Promise 和 Async/Await
在现代的 JavaScript 开发中,异步编程是至关重要的。本文将介绍 JavaScript 中的异步编程概念,重点讨论 Promise 和 Async/Await 这两种常见的处理异步操作的方法。通过本文的阐述,读者将能够更好地理解和应用这些技术,提高自己在 JavaScript 开发中处理异步任务的能力。
|
17天前
|
前端开发 JavaScript 开发者
JavaScript进阶-Promise与异步编程
【6月更文挑战第20天】JavaScript的Promise简化了异步操作,从ES6开始成为标准。Promise有三种状态:pending、fulfilled和rejected。基本用法涉及构造函数和`.then`处理结果,如: ```javascript new Promise((resolve, reject) => { setTimeout(resolve, 2000, '成功'); }).then(console.log); // 输出: 成功
|
2月前
|
JSON 前端开发 JavaScript
【JavaScript技术专栏】JavaScript异步编程:Promise、async/await解析
【4月更文挑战第30天】JavaScript中的异步编程通过Promise和async/await来解决回调地狱问题。Promise代表可能完成或拒绝的异步操作,有pending、fulfilled和rejected三种状态。它支持链式调用和Promise.all()、Promise.race()等方法。async/await是ES8引入的语法糖,允许异步代码以同步风格编写,提高可读性和可维护性。两者结合使用能更高效地处理非阻塞操作。