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

Question

当前在使用Axios到后端进行呼叫时，我很挣扎，当前有一个用户注册页面，并且我想将用户数据发送到后端，一切似乎都已正确设置，但是我发现这些错误我的谷歌浏览器。

这是我的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 Proxy Docs

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

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

如果仍然出现CORS错误，我将在快递应用程序上安装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不再是后端URL 。您将必须返回所有api路由并对其进行调整，或者为process.env.NODE_ENV插入三进制，这是更多工作。

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

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

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

Answer 3

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