使用React和axios前端连接到我的Node.js和MongoDB后端的问题

Question

我目前正在使用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上运行。 我不知道如何解决此问题或下一步该怎么做，我到处都是，这个小问题越来越令人沮丧。

任何帮助，指针或一般建议将不胜感激，因为这似乎是一个非常琐碎的错误。 在此先感谢您的帮助。

Answer 1

问题是，当您运行axios.post('api/users/register', newUser)它仅针对http://localhost 。 您说后端正在http://localhost:5000运行，因此您需要运行一个绝对地址以正确访问后端。 该代码将变成axios.post('http://localhost:5000/api/users/register', newUser)来访问后端API。

Answer 2

还可以查看create-react-app文档来设置代理。 CRA代理文件

我想在package.json设置代理（用于react客户端）。 我通常会添加以下内容，并且所有路由都以api开头，以节省输入内容。

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

如果仍然出现CORS错误，我会在Express应用程序上安装npm软件包cors （在Express应用程序上）并将其设置为中间件。 Cors Docs

const app = express()
app.use(cors())

这是最基本的配置，但是如果需要，您可以将前端特别列入白名单。

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

如果愿意，您还可以按通常的明示方式将cors添加到任何一条路线。

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

这就是我使用CRA和Express进行开发设置应用程序的方式。 然后，当事情投入生产时，我不必更改前端的api路由。 这是写出整个路径ei的固有问题：' http：// localhost：5000 / api / users / register'-当应用程序在Heroku或任何地方以及localhost上投入生产时，这将不起作用：5000不再是后端网址。 您将必须返回所有api路由并对其进行调整，或为process.env.NODE_ENV插入三元数，这是更多工作。

在这种情况下，您只需要前端axios.post('/api/users/register', newUser)

代理将负责其余的开发工作。

现在，当您发布站点时，如果您选择使其成为一个静态服务于静态构建的快速应用程序，则只需将api路由处理程序置于为服务index.html的所有东西之上。 无论如何，这超出了您的问题，只是试图给您一种方法的想法，该方法可以使工作更容易一些。

Answer 3

确保您的Client / React Package.json中具有“ proxy”：“ http：// localhost：5000 ”