为什么 axios 将当前 URL 附加到 Laravel / React 中的 API 调用中？

Question

我正在尝试让一个简单的项目在 Laravel、React 和 Redux 中运行。这是 Redux Saga 工作线程调用的函数：

function getTasks() {
    return axios.get('/api/tasks').then(response => response.data);
}

现在，如果 React 根组件位于主目录（URL http://localhost:8000），则向 URL http://localhost:8000/api/tasks 发出请求，一切正常。但是如果根组件位于另一个页面中，例如http://localhost:8000/home，向 http://localhost:8000/api/tasks/home 发出请求，显然它不起作用。我不明白为什么当前 URL 会附加到请求的 URL 后面，相反会更有意义。

有什么想法吗？预先感谢您。

Answer 1

为了确保您有正确的 api 请求，我建议您为 axios 设置基本 url，如下所示

axios.defaults.baseURL = "http://localhost:8000";

function getTasks() {
    return axios.get('api/tasks').then(response => response.data);
}

Answer 2

您可以尝试为每个 axios 调用添加正斜杠。 而不是这个

axios.get('api/tasks')

使用这个：

axios.get('/api/tasks')

Answer 3

与此无关，我的问题无法回答，因为没有足够的上下文。基本上问题出在React Router中，调用了以下路由并将id分配给home，因此执行的代码位于Task组件中，并且API调用不同。

<Route path='/:id' component={Task} />

Answer 4

如果您使用 axios 默认的 baseUrl 来获取绝对路径。 例如：

axios.defaults.baseURL = "http://example.com";

确保您有正确的协议格式，例如 http:// 而不是 http:，这样 React 路由器就不会附加到您当前的页面 url。

享受:)

Answer 5

您可以使用它来始终获取根网址：

let url = window.location.protocol + '//' + window.location.host;

然后做

function getTasks() {
    return axios.get(url + '/api/tasks').then(response => response.data);
}

或者更好地将其添加为

window.axios.defaults.baseURL = url;