使用 react 和 mongo DB 连接前端和后端 - 404 错误答案

【问题标题】：Connecting front-end and back-end with react and mongo DB - 404 error使用 react 和 mongo DB 连接前端和后端 - 404 错误
【发布时间】：2020-07-22 19:29:58
【问题描述】：

我正在尝试连接托管在我的 localhost:3000 端口中的应用程序。后端位于 localhost:8080 端口上（不是远程 API，而是在我自己的 PC 上。我下载了一个预先创建的后端 api，并使用 .env 文件将前端与 MongoDB 链接到后端.

奇怪的是，在 MongoDB 上，连接看起来没问题，按照我正在使用的教程。后端和前端看起来也不错，但是，我无法使用屏幕截图中的表单登录。尝试登录或创建新用户时出现的错误是“xhr.js:178 POST http:// localhost:3000/login 404（未找到）”

将整个代码放在这里有点困难，所以我将您链接到前端 repo：https://github.com/manuelalonge/complex-app 和后端 repo：https://github.com/manuelalonge/back-end-api

我可以理解问题很可能出在后端，但我不知道具体在哪里。我试图回到教程中的上一课，但仍然没有得到解决。

通过屏幕共享会话可能更容易解决此问题，所以如果有人能与我联系，我将不胜感激。

截图 --> [1]: https://i.stack.imgur.com/jVJzn.png

【问题讨论】：

您正在向/login发帖，
嗨，是的，我可以看到，但我不确定我应该更改代码的哪一部分来解决这个问题。可能是 Main.js 吗？

标签： node.js reactjs mongodb

【解决方案1】：

您的屏幕截图指出了问题所在。你发帖到localhost:3000，因为你知道这是前端 webpack 服务器。

您需要创建一个 axios 配置文件并设置一个基本 url 以访问正确的端点。

const axiosInstance = axios.create({
  baseURL: 'localhost:8080'
});

export default axiosInstance;

另外，请添加某种文件结构。

【讨论】：

好的，现在我已经添加了您建议我添加的实例。我仍然不确定在哪里导入它。我曾尝试将其导入 HeaderLoggedOut.js，但它没有任何意义。感谢您的建议，我稍后会创建结构。
问题解决了，我不得不以某种方式更改主文件中的 Axios 默认基本 url。感谢支持。