【发布时间】:2022-01-24 05:37:56
【问题描述】:
在我的 MERN 应用程序中,我尝试像往常一样使用 axios,但我稍微更改了文件结构,我认为这影响了我使用 axios 的能力(它更短,我更喜欢它)。
服务器始终在 nodemon 上运行 port 3001
客户端总是在port 3000 上运行npm start
过去与 axios 合作过的文件结构(A):
server
client
//react files here
routes
index.js
server.js
不适用于 axios 但可用于 fetch 的文件结构 (B)(我收到错误 GET http://localhost:3000/api/data 404 (Not Found))
parent
client
//React files here
server
//node files here
我的 axios 代码:
const res = await axios.get('/api/data')
我的获取代码:
const res = await fetch('http://localhost:3001/api/data')
在我的 React 应用程序内部,axios 与文件结构 A 完美配合,但当我将 axios 与文件结构 B 一起使用时,它会产生错误。
所以我的问题是: 为什么我的 axios 不能在 fetch 时一直工作? (我认为这可能与 axios 需要成为服务器的孩子有关,而 fetch 可以在任何它想要的地方,但我觉得这是错误的) 我是否可以进行任何更改以使 axios 与文件结构 B 一起使用?
【问题讨论】:
-
这可能是代理问题。你是否在你的 package.json 文件中设置了代理?
-
您能否分享您遇到的错误?
-
你需要像这样在你的 Axios 中使用整个 URL 路径: const res = await axios.get('localhost:3001/api/data')
-
@ertemishakk 在我的 package.json 中,我确实使用了代理。我使用了迄今为止我在所有项目中使用的相同代理:“proxy”:“localhost:3001”,此外,如果您仔细查看文件结构 B 部分中的最后一句,您会注意到我有分享了我收到的错误。
-
@NazmulHasan 指定 localhost:3001 确实有效,我感谢你,但我从来没有在我的任何其他项目中添加整个路径,这很奇怪,但我想这给了我一个谷歌的新事物。也许存在代理问题。我的这部分代码是从我的其他项目中复制的,因此问题可能是我在复制项目时错过的反应更新或偷偷摸摸的文件。
标签: node.js reactjs api axios fetch