Javascript 使用React和axios前端连接到my Node.js和MongoDB后端时出现问题

我目前正在努力使用Axios打电话到我的后端，我目前有一个用户注册页面，我想将用户数据发送到后端，一切似乎都设置正确，但我在我的google chrome中发现了这些错误

下面是我的React Register.js中的代码，它破坏了我的程序并导致此错误

  onSubmit(e) {
    e.preventDefault();

    const newUser = {
      name: this.state.name,
      email: this.state.email,
      password: this.state.password,
      password2: this.state.password2
    };

     axios.post('api/users/register', newUser) //EDIT : Line 35, where the error is
     .then(res => console.log(res.data))
     .catch(err => console.log(err));
  }

onSubmit连接到网站底部的一个按钮，那里的所有代码都是100%。一个可能会伤害我的问题是，我的服务器在localhost5000上，而我的前端在我的计算机上的localhost3000上运行。我不知道如何解决这个问题，也不知道下一步该怎么做，我到处都找过了，这个小问题令人难以置信地沮丧

---

任何帮助、指示或一般建议都将不胜感激，因为这似乎是一个极其微小的错误。提前感谢您的帮助。

问题在于，当您运行

axios.post（'api/users/register'，newUser）

时，它只是针对

http://localhost

。您声明后端正在

http://localhost:5000

因此，您需要运行一个绝对地址来正确地访问后端。代码将变成

axios.post（'http://localhost:5000/api/users/register“，newUser）

点击后端API。

还可以查看

创建反应应用程序

文档以设置代理

我喜欢在

package.json

中设置我的代理（用于react客户端）。我通常添加以下内容，并且我的所有路由都以

api

开始，以节省键入时间

// somewhere in package.json
"proxy": {
  "/api/*": {
    "target": "http://localhost:5000"
  }
}

如果我仍然遇到CORS错误，我会安装npm包

CORS

（在express应用程序上），并在路由处理程序之前将其设置为中间件

这是最基本的配置，但如果愿意，您可以明确地将前端列为白名单

app.use(cors({ origin: 'http://localhost:3000' }))

如果您愿意，您还可以以通常的快速方式将

cors

添加到任何一条路线

app.post('/api/user/register', cors(), (req,res) => {
  // route handler
})

这就是我使用CRA和Express for development设置应用程序的方式。然后，当产品投入生产时，我不必更改前端的api路由。这就是写出整个路径的固有问题：'''-当应用程序投入生产时（比如在Heroku或其他任何地方），这将不起作用，并且localhost:5000不再是后端url。您必须返回到所有api路由并调整它们或插入

process.env.NODE\u env

的ternaries，这需要更多的工作

在这种情况下，前端所需的只是

axios.post（'/api/users/register'，newUser）

代理将负责开发中的其余部分

---

现在，当您发布站点时，如果您选择使其成为一个静态地为您的构建提供服务的单一express应用程序，那么您只需将api路由处理程序置于为index.html提供服务的所有应用程序之上。无论如何，这有点超出你的问题范围，只是想给你一个简单一点的方法。

确保你有“代理”：“在你的客户端/React包中。json

嘿，我复制并粘贴了推荐的代码，我在我的谷歌浏览器中发现了这个错误，加载失败：对飞行前请求的响应未通过访问控制检查：请求的资源上不存在“访问控制允许来源”标头。因此，不允许访问源“”。有什么想法吗？好的，第一件事是你现在正在和后端对话。这是来自后端的CORS错误，这意味着您没有配置CORS。您需要将标题添加到所需站点的访问控制允许原点。如果您不知道站点在哪里，我建议将其设置为

*

。CORS假设

localhost:3000

和

localhost:5000

是根本不同的域。在快速搜索（不知道您在后端使用的框架）后，我找到了ExpressJS（更常见的API框架之一）这可能会对您有所帮助。如果您不想手动执行，请使用

cors

npm模块。在根文件中导入并在应用程序中设置它，如“app.use（cors（））”。非常感谢您键入所有这些内容，我将在另一个应用程序中使用cors，但最后我只使用了您在回复的第一部分中建议的内容。谢谢你花时间写这封信：）。是的，我记得我帮你在我们的不和中找到了它。我是汤姆卡巴斯。

app.post('/api/user/register', cors(), (req,res) => {
  // route handler
})