[Vuejs]-GET Request repeatedly failed on the front end but not on backend

by

0👍

✅

404 is the HTTP status code for Not found, which implies there is no route setup on localhost for /books. Actually, /books would route to your app, not the backend (unless you have a proxy setup on your app server that redirects to the backend).

If a proxy were involved, it’s likely misconfigured. Otherwise, the target URL in the Axios request should be <backend_url>/books (e.g., http://localhost:9999/books with the back running locally on port 9999, and the app on some other port).

0👍

Change

let pbBooks = await axios.get(`/books/`, {
...

to

let genre = "PB"

let pbBooks = await axios.get(`/books/${genre}`, {
  method: 'GET',
  headers: {'Content-Type': 'application/json'}
})

reason is the params part of the config object is converted to query strings (/books?genre=PB) instead of /books/PB, which is what the backend is expecting

More: https://masteringjs.io/tutorials/axios/get-query-params

Leave a comment