只有当我提供服务器的完整路径时，Axios get请求才起作用

Question

我有一个使用Node.JS和express构建的后端和前端使用React的eCommerce项目。我通过在React文件夹中的package.json文件中提供服务器地址作为代理，将React前端连接到后端。

客户端中有多个使用Axios从服务器获取数据的组件。问题出在某些组件中，当我只提到服务器路由的相对路径时，axios get请求可以正常工作。但在其他组件中，当我提供相对路径时，请求会失败，只有当我提供完整路径时，请求才会起作用。

下面是一个从服务器获取产品列表的组件，它只使用提供的相对路径。

componentDidMount() {
        axios.get('api/admin/getproducts')
        .then((res) => {
            this.setState({ products: res.data, loading: false })
        })
        .catch(err => {
            console.log(err)
        }) 
    }

下面是另一个组件，当我只提到获取订单列表的相对路径时，请求失败并返回404 (未找到)错误。

componentDidMount() {
        axios.get('api/user/getorder', {
            headers: {
                "auth-token": this.context.token
            }
        })
        .then((res) => {
            this.setState({orders: res.data, loading: false});
        })
        .catch((err) => {
            console.log(err)
        })
    }

下面是我在提到相对路径404 error that I get时得到的错误

但是，当我在get请求中提到包含服务器地址的路由的完整路径时，请求成功并使用数据进行响应。因此，下面的请求成功了，因为我提到了完整路径

axios.get('http://127.0.0.1:5000/api/user/getorder', {
            headers: {
                "auth-token": this.context.token
            }
        })  

我不确定这里的问题是什么，为什么它不能按照它应该的方式工作。如果我在服务器端代码或React代码中遗漏了什么，请告诉我。我广泛地在互联网上寻找解决方案，但我没有找到一个。

这是我的完整代码(包括后端和前端) => https://github.com/sundarboss/Ecommerce

Answer 1

问题是，您的React开发服务器和后端运行在不同的端口上(3000用于前端，5000用于后端)，因此，如果您没有在请求中指定主机和端口，则默认行为是请求转到运行页面的主机(端口3000处的前端主机)，因此您会得到错误404，因为在前端，该URL不会被处理。

您应该考虑使用像dotenv这样的包来配置后端基URL，并为tour客户端提供正确的基URL。