Node.js 将mern应用部署到heroku后出现路由问题

我制作了一个运动跟踪器MERN stack应用程序，当我运行npm start时，它在我的本地计算机上运行良好（它连接到服务器，我可以添加用户、运动等） 但当我将它部署到heroku时，我可以看到React前端，但我无法创建用户、练习等 有人知道为什么吗？ 我认为axios在我的一个组件中可能有问题，因为我使用的是localhost url而不是heroku url。但是我不知道如何使用heroku。 以下是我的创建用户组件：

import React, {Component} from 'react';
import axios from 'axios';

export default class CreateUser extends Component {

    constructor(props) {
        // need to call super() for constructors of subclass in javascript
        super(props);

        // ensure that "this" is referring to the right object
        this.onChangeUsername = this.onChangeUsername.bind(this);
        this.onSubmit = this.onSubmit.bind(this);

        // use state to create variables in React
        this.state = {
            username: '',
        }
    }

    onChangeUsername(e) {
        this.setState({
          username: e.target.value
        })
    }

    onSubmit(e) {
        //prevent default HTML behaviour
        e.preventDefault();

        const user = {
          username: this.state.username,
        }

        console.log(user);

        // connect backend to frontend
        // second parameter of axios statement is the body
        // 'user' is from users.js
        axios.post('http://localhost:5000/users/add', user)
            .then(res => console.log(res.data));

        // once the user enters a username, make the username box blank again, staying on the same page
        this.setState({
            username: ''
        })
    }

    render() {
        return (
          <div>
            <h3>Create New User</h3>
            <form onSubmit={this.onSubmit}>
              <div className="form-group"> 
                <label>Username: </label>
                <input  type="text"
                    required
                    className="form-control"
                    value={this.state.username}
                    onChange={this.onChangeUsername}
                    />
              </div>
              <div className="form-group">
                <input type="submit" value="Create User" className="btn btn-primary" />
              </div>
            </form>
          </div>
        )
      }
    }

---

请注意，我的mongodb uri中有我的用户名和密码。在我自己的文件中，我有我的用户和密码

问题是一旦应用程序部署到

Heroku

或任何其他平台，就没有

localhost

localhost

的概念只存在于您的本地环境中。因此，您应该向axios发送请求

axios.post('/users/add', user)

而不是

axios.post('http://localhost:5000/users/add', user)

因为所有东西都在一个端口上运行，axios会自动将路由附加到URL

我的意思是如果你的heroku应用程序正在

scott.herokuapp.com

（示例）

---

一旦该路由被调用，您的URL将是

scott.herokuapp.com/users/add

。

问题是，一旦应用程序部署到

Heroku

或任何其他平台，就没有

localhost

的概念，而

localhost

只存在于您的本地环境中。因此，您应该向axios发送请求

axios.post('/users/add', user)

而不是

axios.post('http://localhost:5000/users/add', user)

因为所有东西都在一个端口上运行，axios会自动将路由附加到URL

我的意思是如果你的heroku应用程序正在

scott.herokuapp.com

（示例）

---

调用该路由后，您的URL将为

scott.herokuapp.com/users/add

。

在Heroku部署之前，您是否在MongoDB中列出了IP？在Heroku部署之前，您是否在MongoDB中列出了IP？即使我删除了URL的本地主机部分，我仍然在我的URL中得到了一个未定义的部分我得到了这个错误错误即使我删除了url的localhost部分，我仍然会在url中得到一个未定义的部分