反应，节点 axios 不工作，但 fetch 工作

Posted 2023-03-07

【中文标题】反应，节点 axios 不工作，但 fetch 工作

【英文标题】：React, Node axios not working but fetch is working

【发布时间】：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 确实有效，我感谢你，但我从来没有在我的任何其他项目中添加整个路径，这很奇怪，但我想这给了我一个谷歌的新事物。也许存在代理问题。我的这部分代码是从我的其他项目中复制的，因此问题可能是我在复制项目时错过的反应更新或偷偷摸摸的文件。

【参考方案1】：

您在 axios 调用中使用了错误的端口。

localhost:3000/api/data, replace 3000 with 3001

【讨论】：

当我使用 axios 时，我从来不需要指定端口，这就是我要问的问题。过去，我有文件结构 A 和 axios 版本“axios”：“^0.21.4”，（早期版本的 axios 也可以正常工作）而且我不必指定确切的路径，我只需键入 axios .get('/api/route") 对于我当前的错误，我使用的是文件结构 B 和 axios 版本“axios”：“^0.24.0”，所以，在过去的 3 个版本中，axios 发生了一些变化，axios 取决于关于文件结构或有一行代码我遗漏了。我希望这里有人可以确切地知道原因。