Search code examples
reactjshttperror-handlingxmlhttprequestaxios

React, how to debug (axios) 404 error?

Using React, I am trying to make a request using axios.

In the console it shows me that I get an 404 error, but I would like to know how and why this is happening. Can anybody advice me on where to begin looking to solve this problem?

One of my main questions is, where is the following url coming from?

GET http://127.0.0.1:3000/en/order/account/[object%20Object] 404 (Not Found)

It seems like a request is being made to the above url, while that is not the url that is supposed to be requested. The url that should be requested is printed out, to check if it is correct.

On the (Django) development server, running at :8000, I am checking if a request is coming in. There I can see that indeed no request is coming in, not at the intended url (the one being logged to the console).

I have taken a look at the lines in the files being pointed at by the error line on the console (createError.js:16, settle.js:18, xhr.js:77), but that doesn't make it much clearer what happened. I guess this is just saying that that is the error is formed with the code in 'createError.js'.

This is what I see in the Chrome console: enter image description here

Here is the part of the code that performs the axios request:

handleSubmit(submittedValues) {
    console.log("submit")
    console.log(submittedValues)
        // event.preventDefault();
        this.register(submittedValues).then(
            function (data) {
              console.log(data)
            }
        )
    console.log("this.props.match.params.locale: " + this.props.match.params.locale)
    let url = 'http://127.0.0.1:8000/customer_portal/set_locale/' + this.props.match.params.locale
      console.log("url: " + url)
      return axios.get({
        url: url,
        method: 'get',
    })
        .then(function(response) {
          console.log(response)
        })
        .catch(function(error) {
          console.log("error", error)
        })
  }
Solution

  • Try axios.get(url)

    axios.get() takes a string as an argument, but you're giving it an object so it is inserting the default URL path automatically before inserting the object.