首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

简单的MERN Axios调用对我不起作用(也从来没有)。一致的404错误。可能是由于文件结构的原因

MERN是一种全栈JavaScript开发框架,包括MongoDB数据库、Express.js后端框架、React前端框架和Node.js运行环境。Axios是一个基于Promise的HTTP客户端,用于在浏览器和Node.js中发送HTTP请求。

针对你提到的问题,简单的MERN Axios调用对你不起作用并且出现一致的404错误,可能是由于以下原因之一:

  1. 文件路径错误:请确保你的文件路径是正确的,包括前端代码中的请求URL和后端代码中的路由路径。如果路径不正确,服务器将无法找到对应的资源,从而导致404错误。
  2. 后端路由设置错误:请检查你的后端代码中的路由设置,确保你的请求能够正确地映射到对应的处理函数。如果路由设置错误,服务器将无法处理请求,从而导致404错误。
  3. 后端资源不存在:如果你的请求是针对后端的某个资源(如API接口),请确保该资源存在。如果资源不存在,服务器将返回404错误。
  4. 跨域问题:如果你的前端代码和后端代码运行在不同的域名或端口上,可能会遇到跨域问题。在开发环境中,你可以通过设置后端的CORS(跨域资源共享)来解决跨域问题。

针对MERN Axios调用不起作用的问题,你可以参考以下步骤进行排查和解决:

  1. 检查前端代码:确保你的前端代码中使用了正确的请求URL,并且请求方式(GET、POST等)与后端代码中的路由设置相匹配。
  2. 检查后端代码:确保你的后端代码中设置了正确的路由,并且能够正确地处理对应的请求。
  3. 检查网络连接:确保你的网络连接正常,可以尝试使用其他网络环境或设备进行测试。
  4. 使用调试工具:可以使用浏览器的开发者工具或类似的调试工具来查看请求的详细信息,包括请求头、请求参数等,以便更好地定位问题。

如果你需要更详细的帮助,可以提供更多的代码和错误信息,以便我们能够更准确地帮助你解决问题。

关于MERN、Axios以及相关的云计算产品,腾讯云提供了一系列的产品和服务,例如:

  1. 云服务器(CVM):提供可扩展的虚拟服务器实例,用于部署和运行MERN应用程序。详情请参考:腾讯云云服务器
  2. 云数据库MongoDB:提供高性能、可扩展的MongoDB数据库服务,适用于存储MERN应用程序的数据。详情请参考:腾讯云云数据库MongoDB
  3. API网关:提供统一的API入口,用于管理和调度MERN应用程序的API接口。详情请参考:腾讯云API网关

请注意,以上仅为示例,腾讯云还提供了更多与云计算相关的产品和服务,你可以根据具体需求选择适合的产品。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

如何更好在 react 中使用 axios 拦截器

你也许会疑问为什么要使用 useRef 来存储写入日志函数,这是因为写入操作可能是异步,特别是在 axios 拦截器中,拦截器会和请求执行上下文进行绑定,异步请求可能会把日志写到旧状态中,习惯把这种绑定实时状态结构称作...详见最后一节 axios 拦截器封闭性。 当然你不必强制在 useLog 中使用 useRef 从而实现导出实时更新日志功能,大可以让调用此库服务自行进行 状态跟踪。...同理,想要在 axios调用第三方库,例如页面路由,需要把 放在路由器中。...你也许不信,这是什么狗屁逻辑,写出这个 bug 时候很郁闷,当时在 codesandbox 上写,还以为是环境问题,后来发现在第一层,axios 在第五层,人家 codesandbox 在云层...尾语 这就是在 react 中 axios 拦截器封装雏形,如果你有更好方法,欢迎探讨。

2.6K30

77.9K Star Axios 项目如何优雅实现请求重试

axios是什么,无需多讲,axios解析可以看下77.9K Star Axios 项目有哪些值得借鉴地方这篇文章 为什么需要请求重试 项目中,经常会有很多用户网络抽风或者各种原因造成偶发性网络异常请求错误...这个时候实现网络错误请求错误重试能比较好解决这种偶发场景。 如何去做呢 我们可以使用axios-retry这个库去实现重拾。...也就是说多次重试请求必须在timeout内结束 retryDelay每个请求之间重试延迟时间,默认为0 例如,如果想定制,重试4次、除了默认情况重试外,404重试、重置超时时间、重试延迟时间50ms...: true, retryDelay: 50 }); 实现原理 axios-retry实现重试原理比较简单 axios-retry会在axiosconfigaxios-retry字段中保存当前已经重试次数...有的时候可能是一些偶发错误,这个时候可能需要重试 异步接口返回不符合预期 假设以下场景。

3.3K30
  • REST API有关幂等性等11条最佳实践

    职业生涯中,使用了数百个 REST API 并制作了数十个。由于我经常在 API 设计中看到相同错误,因此认为写下一组最佳实践可能会更好。...有很多层软件会对请求返回 404,其中有些可能是你无法控制: 配置错误客户端点击了错误 URL 配置错误代理(客户端和服务器端) 负载平衡器配置错误 服务器应用程序中路由表配置错误 返回...如果将 404 作为成功处理,而堆栈中失败返回 404,作业就会从队列中删除,删除不会传播。在现实生活中就遇到过这种情况。...当客户最终看到不一致数据时,这可能是 "你错",可能不是,但他们给你打的支持电话将是真实建议是选择另一种 400 级错误代码,客户可以将其理解为 "知道你要什么,但我没有"。...但几乎任何策略都比返回 404(实体未找到)要好。 规则#10:一定要使用结构错误格式 如果您正在为一个简单网站构建后端,您可能可以忽略此部分。

    24920

    React里配置接口跨域代理【亲测完美实现~】

    不过,随着代码逐渐构建完毕,笑脸渐渐凝固了::: ? 黑红黑红报错,看着就闹心!!! “proxy is not a funciton” ??? 逗我呢??? ?...擦干眼泪细细品,proxy从依赖中引入,执行函数调用后却说他不是个function。...那么真相就只有这么几个(突然发现程序员适合当侦探啊,都需要逻辑推理能力~):   1、要么proxy引入依赖不成功【没报模块引入错误,所以排除】       原因1是依赖根本没安装       原因2...可能是官网demo写早,proxy这个插件经过了修改?那咱改! 一顿操作、代码改成这样: ? 既然导出对象里createProxyMiddleware是个函数,那就用这个函数调用不就得了。...但是运行页面,报代理地址404

    2.5K20

    详细自定义封装Axios请求库,你还不会二次封装吗?

    封装功能 首先是功能上封装,我们新建一个js文件这里叫request.js。 首先我们先导入axios和qs两个模块。 为什么要使用qs模块? ajax请求get请求是通过URL传参(以?...那如果没有报状态码,那就说明非直接错误,那就可能是超时了,我们在else中进一步处理。...开始封装 创建一个js文件这叫http.js。 导入封装好功能实例。 // 导入封装好axios实例 import request from '....这一层请求信息封装也就好了,目的是补充配置。 封装请求方法 我们在封装一次调用方法,便于调用请求。 创建一个js文件这是api.js。...话说这儿是借鉴了许多网上封装形式总结,但是这一次感觉必要性不大,但是应该是有意义不明白,有大佬看到还麻烦点醒一番。 最后单个暴露每个请求模块就可以。

    5.7K40

    Fetch还是Axios——哪个更适合HTTP请求?

    在响应对象中,具有以下值: data,这是实际响应主体 status,调用 HTTP 状态,例如 200 或 404 statusText,以文本消息形式返回 HTTP 状态,例如 ok headers...在一个较大项目中,如果你创建了大量调用,那么使用 axios 来避免重复代码会更舒服。 错误处理 在这一点上,我们还需要给 axios 点赞,因为处理错误是非常容易。...如果出现像 404 这样错误响应,promise 就会被拒绝并返回一个错误,所以我们需要捕获一个错误,我们可以检查它是什么类型错误,就是这样。让我们看看代码示例。...总结 在这篇文章中,比较了用于创建 HTTP 请求两种方法,从简单概述开始,通过语法和一些重要功能,如下载进度或错误处理。...在小型项目的情况下,只需要几个简单 API 调用,Fetch 也是一个不错解决方案。 在选择项目的最佳解决方案时,还要注意一个因素,这是非常重要

    4.9K20

    完成Vue3.2+typescript项目有感

    在实际项目中,需要调用接口时,需要先用typescript进行接口定义,虽然这会在一定程度上增加代码量,但对于中大型项目来说会更便于维护,在调用接口时候会有代码提示,这也是ts优势了。...,ts中详细教程可以看这篇文章,可以更深入了解interface项目开发过程遇见问题路由无法跳转这里犯错误其实还是因为自己掌握不够好。...由于不能再setup函数中使用data和methods,所以Vue为了避免我们错误使用,它直接将setup函数中this修改成undefined.但由于本项目中搜索图标是标签,所以也就没必要使用...module在登录界面进行样式修改时候出现了问题,无法将整体页面背景修改成灰色,通过body样式修改,发现不起作用,如果直接删除vue单文件组件scoped...组件时候,由于文档实例并未像element plus一样直接用结果登录界面的输入框全都不见了....

    53540

    axios详解以及完整封装方法

    patch:更新数据,是put方法补充,用来已知资源进行局部更新 delete:请求服务器删除指定数据 head:获取报文首部 请求方法别名 为了方便起见,axios为所有支持请求方法提供了别名...http.js文件用来封装我们axios,api.js用来统一管理我们接口。...axios封装基本就完成了,下面再简单说下api统一管理。 整齐api就像电路板一样,即使再复杂能很清晰整个线路。...3.restful风格接口,可以通过这种方式灵活设置api接口地址。 最后,为了方便api调用,我们需要将其挂载到vue原型上。...,这里只做一个简单示例: 没网了 这是app.vue,这里简单演示一下断网。

    6.1K12

    node与浏览器中cookie

    ,话不多说,开始 封装​ 一般而言,很少有裸装使用 axios ,就涉及项目来说,都会将 axios request 封装成一个函数使用,接着在 api 目录下,引用该文件。...// 根据根据对应错误,反馈给前端显示 if (response) { if (response.status == 404) { console.log('请求资源路径不存在...,没错,就是这么简单由于是运行在浏览器内,所以像 cookies,headers 等等都没必要设置,浏览器会自行携带该有的设置,其实想设置设置不了,主要就是浏览器内置跨域问题。...感觉你写跟别人没什么区别啊 别急,下面才是重头戏。也是为啥标题只写 axios,而不写 vue-axios 或者 axios 封装原因。...不过由于 nestjs 中自带 axios 模块,加上需要转发 http 请求,于是就自行封装了一个 axios

    1.9K30

    滴滴前端必会vue面试题汇总_2023-05-19

    ; 双向数据绑定:保留了angular特点,在数据操作方面更为简单; 组件化:保留了react优点,实现了html封装和重用,在构建单页面应用方面有着独特优势; 视图,数据,结构分离:使数据更改更为简单.../#/login 只有 website.com 会被包含在请求中 ,因此对于服务端来说,即使没有配置location,不会返回404错误 解决方案 看到这里相信大部分同学都能想到怎么解决问题了, 产生问题本质是因为我们路由是通过...JS来执行视图切换, 当我们进入到子路由时刷新页面,web容器没有相对应页面此时会出现404 所以我们只需要配置将任意页面都重定向到 index.html,把路由交由前端处理 nginx配置文件....,可能是请求失败,可能是请求获得了服务器响应,但是返回错误状态。...以Axios为例,这类异常我们可以通过封装Axios,在拦截器中统一处理整个应用中请求错误

    87060

    系统服务化构建-状态码设计要点

    这里举一个简单幂等性例子,我们知道 DELETE 方法是幂等,如果之前已经删除过特定资源,再次请求时应该返回 200 响应码,而不是 404 资源不存在响应。...前端 WebView 请求会涉及到跨域 CORS 其实简单来说,客户端工程师最关心两个问题: 第一,接口有没有通。 第二,接口有没有返回想要数据。...有经验客户端工程师会关心接口如果不通,返回提示是否可以指导排除错误,或者说跟踪到问题所在。接下来接口设计是否合理,是否有隐患,就看工程师职业水平和职业素养了。...微信错误码.png “接口字段整齐 这里所说字段整齐是指服务提供方给到数据结构是完整,最通用,现在大部分接口格式如下 三个字段应该都存在,可以为空,避免 NULL。...业务状态码指正常业务处理结果显示说明,而异常通常由于语法错误,数据缺失造成程序不能正常执行完成。不能通过业务状态码而屏蔽异常。

    4K30

    如何实现一个HTTP请求库——axios源码阅读与分析

    这个代码示例很简单就不过多赘述了,下面让我们来看下如何添加一个过滤器函数。...具体撤回实现方法我们会在后面的章节源码分析时候进行说明。 axios核心模块是如何设计与实现 通过上面的例子,相信大家axios使用方法都有了一个大致了解。...由于篇幅有限,下面选取部分重点源码进行简单介绍: module.exports = function dispatchRequest(config) { throwIfCancellationRequested...发送请求入口,因为函数实现比较长,简单说一下相关设计思路: chain是一个执行队列。...由于篇幅原因,本文仅针对axios核心模块进行了分解和介绍,如果其他代码有兴趣同学,可以去GitHub进行查看。 如果有任何疑问或者观点,欢迎随时留言讨论。

    1.1K20

    完整Axios封装-单独API管理层、参数序列化、取消重复请求、Loading、状态码...

    前言 Axios 相信Vue熟悉铁汁它不会感到陌生了(当然不熟悉Vue你可以认识它),这简直就是前端近年来一大杀器,自从Vue2开始之后,官方推荐使用axios来进行网络请求,后面基本大部分Vue...(不知道当你知道了) 你只要知道axios底层就是依赖于它就行,也就是它二次封装,那我们axios再次封装,也就是三次封装?套娃?...-,假如现在同时发起两个请求,两个请求同时打开了个Loading层,现在有一个请求结束了,关闭了loading层,但是另一个请求由于某些原因并没有结束,还在请求,造成后果就是页面请求还没完成,loading...'); }); 复制代码 上面就大致列了一下常见各种情况,下面就直接上代码,简单,只要接口错误,提示对应错误信息就完了(=^▽^=)。...当然,上面只是简单缩短axios最外层而已,如果你已经很明确且有公司有规定响应数据结构,那你能自行再次修改,看具体场景而定。 关于code错误提示 这点根据要根据具体业务场景而定!!!

    3.9K21

    Vue + Element UI 实现权限管理系统 前端篇(三):工具模块封装

    封装 axios 模块 封装背景 使用axios发起一个请求是比较简单事情,但是axios没有进行封装复用,项目越来越大,会引起越来越多代码冗余,让代码变得越来越难维护。...所以我们在这里先 axios 进行二次封装,使项目中各个组件能够复用请求,让代码变得更容易维护。...Vuex 做全局 loading 动画,或者错误处理 将 axios 封装成 Vue 插件使用 文件结构 在 src 目录下,新建一个 http 文件夹,用来存放 http 交互 api 代码。...yarn add js-cookie 代码实例 1.引入插件 在 main.js 中以 vue 插件形式引入 axios,这样在其他地方就可通过 this.$api 调用相关接口了。 ?...文件结构 在 mock 目录下新建一个 index.js ,创建 modules 目录并在里面创建三个模块 *.js 文件。 ?

    4.9K40
    领券