只有当我提供服务器的完整路径时，axios get request 才有效

Question

我有一个电子商务项目，其后端使用 Node.JS 构建，而 express 和前端使用 React。我通过在 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，并为游览 Axios 客户端设置正确的基本 URL。