I'm trying to make a simple project work in Laravel, React and Redux. This is a function called from a Redux Saga worker:

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

Now if the React root ponent is in the home (URL http://localhost:8000), the request is made to the URL http://localhost:8000/api/tasks and everything works fine. But if the root ponent is in another page, e.g. http://localhost:8000/home, the request is made to http://localhost:8000/api/tasks/home and obviously it doesn't work. I don't understand why the current URL is appended to the requested URL, the contrary would have made more sense.

Any ideas? Thank you in advance.

I'm trying to make a simple project work in Laravel, React and Redux. This is a function called from a Redux Saga worker:

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

Now if the React root ponent is in the home (URL http://localhost:8000), the request is made to the URL http://localhost:8000/api/tasks and everything works fine. But if the root ponent is in another page, e.g. http://localhost:8000/home, the request is made to http://localhost:8000/api/tasks/home and obviously it doesn't work. I don't understand why the current URL is appended to the requested URL, the contrary would have made more sense.

Any ideas? Thank you in advance.

• javascript
• reactjs
• laravel
• ecmascript-6
• redux

• If my answer work for you make sure to mark it as accepted. Thanks you – Tony Commented Sep 6, 2019 at 14:09
• 1 If this problem really exists as you described it, then I think that's pretty crappy of axios. :/ – JAAulde Commented Sep 6, 2019 at 14:12
• 1 @JAAulde I think there are something wrong with his laravel url config – Tony Commented Sep 6, 2019 at 14:17

5 Answers 5

To make sure you have correct api request I remend you set up the base url for axios like this

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

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

You can try to put forward slash for every axios call. Instead of this

axios.get('api/tasks')

Use this:

axios.get('/api/tasks')

It had nothing to do with any of this, my question couldn't be answered because there wasn't enough context. Basically the problem was in the React Router, the following route was called and id was assigned to home, so the executed code was in the Task ponent and the API call was different.

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

If you are using axios default baseUrl to get your absolute path. For example:

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

Ensure you have the correct protocol format e.g http:// not http: so React router does not append to your current page url.

Enjoy :)

You can use this to always get the root url:

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

and then do

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

or better yet add it as

window.axios.defaults.baseURL = url;