React Axios 将 Window 来源附加到提供的 Url (json-server)

Question

我在将 json-server api 与 axios 集成时有一个奇怪的行为。

我使用 json-server 来提供 db.json 文件

json-server --watch db.json --port 4000

在我的 React 应用程序中，我使用 axios 调用“http://localhost:4000/tasks”

在 postman 上测试它，API returns 结果并且工作正常。

但是使用下面的代码片段 (axios) 它将 React 应用程序的两个域和 api Url 连接到请求。

try {
        return axios({
            method: 'GET',
            url: `http://localhost:4000/tasks`
        }).then((response) => {
            debugger;
            return response;
        });
    } catch (error) {
        return new Error('Failed to retrieve Tasks');
    }

我检查了浏览器网络，我的请求 Url 就像那样

请求URL：http://localhost:3000/http//localhost:4000/tasks

因此抛出未找到 - 404 异常

知道为什么会这样吗？

奇怪的是，当我使用另一个 API 就像星球大战 api“https://swapi.co/api/people/1”时，它就像一个魅力。

提前致谢...

Answer 1

我已经使用环境变量解决了这个问题。

我刚刚创建了一个“.env.development”文件并添加了 "REACT_APP_API_BASEURL = 'http://localhost:4000'".

然后我使用如下：

try {
    return axios({
        method: 'GET',
        url: `${process.env.REACT_APP_API_BASEURL}/tasks`
    }).then((response) => {
        debugger;
        return response;
    });
} catch (error) {
    return new Error('Failed to retrieve Tasks');
}

而且效果很好。

React Axios 将 Window 来源附加到提供的 Url (json-server)

React Axios Appends Window Origin To Provided Url (json-server)

reactjs

axios

json-server