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

【问题标题】：Why axios appends the current URL to API calls in Laravel / React?为什么 axios 将当前 URL 附加到 Laravel/React 中的 API 调用？
【发布时间】：2020-01-09 10:04:33
【问题描述】：

我正在尝试在 Laravel、React 和 Redux 中制作一个简单的项目。这是一个从 Redux Saga worker 调用的函数：

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

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

有什么想法吗？提前谢谢你。

【问题讨论】：

如果我的回答对您有用，请务必将其标记为已接受。谢谢你
如果这个问题真的如你所描述的那样存在，那我认为这就是 axios 的糟糕表现。 ://
@JAAulde 我认为他的 laravel url 配置有问题

标签： javascript reactjs laravel ecmascript-6 redux

【解决方案1】：

为确保您有正确的 api 请求，我建议您像这样为 axios 设置基本 url

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

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

【讨论】：

【解决方案2】：

您可以尝试为每个 axios 调用提出斜线。而不是这个

axios.get('api/tasks')

使用这个：

axios.get('/api/tasks')

【讨论】：

【解决方案3】：

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

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

【讨论】：

如果您没有找到解决方案。这里是stackoverflow.com/questions/52525634/…

【解决方案4】：

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

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;

【讨论】：