how solve 404 error in axios post request in vue?

Question

i want send request to an api but i have 404 erro and i have nothing in network can you help me? my code:

    loginMethod() {
  const config = {
    userName: "test@gmail.com",
    password: "1234test",
  };
  return new Promise((resolve) => {
    ApiService.post("api/authentication/login", config)
      .then(({ data }) => {
        console.log(data);

        resolve(data);
      })
      .catch(({ response }) => {
        console.log(response);
      });
  });
},

and ApiService function:

  post(resource, params) {
console.log(params);
const headers = {
  "E-Access-Key": "bb08ce8",
};
return Vue.axios.post(`${resource}`, params, { headers: headers });

},

score 0 · Answer 1 · answered Oct 21 '21 at 18:13

0

Based only on what I can see in your code, you are not telling axios the complete URL if I'm right about it, and you didn't declare it somewhere else do this:

axios.post('yourdomain.com/api/authentication/login',params)

or

axios({
  url:'yourdomain.com/api/authentication/login',
  method:post,
  data:{}
})

or

in your main js file or any other file that you import axios (if you are sharing an instance of it globali):

axios({baseurl:'yourdomain.com'})

and then you don't need to write the complete url everywhere and just insert the part you need like you are doing now and axios will join that address with the baseurl,I hope it helps

answered Oct 21 '21 at 18:13

w3bsite

181
1
10

in config of axios i define baseUrl axios this: ` init() { Vue.use(VueAxios, axios); Vue.axios.defaults.baseURL = "https://mydomainname.com/"; },` and because i defined baseUrl, i write url this api/authentication/login – faezeh Oct 22 '21 at 08:17
I suggest checking your URL again, as @Ginpei mentioned it's very likely that you need to add a / either at the end of your baseurl or in the beginning of the URL in your API, and if the problem exist I suggest you try to test your API without base URL see if it works it make things a little more clear, and If I'm not mistaken you are using a vue axios wrapper, not that it's the source of your problem but the original plain JS axios works great with vue and you probably better of with that,hope you work it out, if the problom persist I may be able to help you in chat – w3bsite Oct 22 '21 at 17:30

score 0 · Answer 2 · answered Oct 21 '21 at 19:12

I guess the URL "api/authentication/login" might be wrong and the correct one would be "/api/authentication/login" that starts with /.

404 error means the resource referred by the URL does not exist. It happens when the server has deleted the resource, or you requested a wrong URL accidentally, or any wrong ways (e.g. GET vs POST)

To make sure if you were requesting to the correct URL (and to find where you're requesting actually), open Google Chrome DevTools > Network panel. You might need reload.

The url api/xxx is relatively solved from the URL currently you are at. If you were at the page http://example.com/foo/bar, the requested URL becomes http://example.com/foo/bar/api/xxx. Starting with / means root so http://example.com/api/xxx.

This answer might help to understand the URL system: https://stackoverflow.com/a/21828923/3990900

in config of axios i define baseUrl axios this: ` init() { Vue.use(VueAxios, axios); Vue.axios.defaults.baseURL = "https://mydomainname.com/"; },` and because i defined baseUrl, i write url this api/authentication/login — faezeh, Oct 22 '21 at 08:12
So the next steps to find clues would be: 1. Check the actual sent request by DevTools > Network, 2. Check the actual received request by server side log. Also it might be a good idea to temporally change the request URL to really simple one (e.g. just `/test`) so that you won't have any mistake at least there — Ginpei, Oct 24 '21 at 17:29

score -1 · Answer 3 · edited Oct 22 '21 at 05:30

-1

"404" means your API Endpoint is not found. You need to declare the location of your API Endpoint exactly. For example: http://localhost:8080/api/authentication/login.

edited Oct 22 '21 at 05:30

Blastfurnace

18,411
56
55
70

answered Oct 21 '21 at 17:19

NK Software House

1
1

how solve 404 error in axios post request in vue?

3 Answers3