Api PUT request showing as "cancelled" with error message "TypeError: failed to fetch"

Question

This is a weird situation, I've looked at loads of SO questions and nothing is quite like it. Hopefully I can get some feedback regarding it

I'm creating a new web page in an existing application and am trying to execute a simple PUT api call and for some reason it is showing a status of cancelled on my network tab in chrome dev tools. The server I'm hitting is a VM on my local machine. I can hit the same endpoint from a different existing page in my application and it goes through just fine so I know that there's nothing wrong with the endpoint. Here's some screenshots:

This is what the network tab in chrome dev tools looks like:

This is what I see when I click on the "cancelled" put call:

and this is what shows on the console tab of chrome dev tools:

One thing to note is that in the second screenshot under the General section on the right it doesn't have anything listed for Request Method, Status Code or Remote Address, see this screenshot of the successful api put request I referred to earlier for reference:

The really weird thing is that my database is getting updated with the updated data, so in some way even though the PUT is showing as cancelled it's working to some degree.

The call originates from a vue component on my page and my backend is in PHP if that matters at all.

here is the call in my .js file that executes the PUT:

return await SimpleService.put(`${app.API_URL}/matching/questions/${borrowerId}`,
    JSON.stringify(answerData), {contentType: 'application/json'})

So, I recognize that without seeing all the code attached to this it isn't really realistic to ask for a black and white answer but if someone can even just give me some ideas of things to check I would greatly appreciate it.

I've tried to include everything I can think of without including unnecessary things but if any additional information is needed from me to figure this out please let me know.

Answer 1

Phil was right in his comment, here's an explanation from what I understand. When the button was clicked that submitted the api call the default behavior for the button click was executed, which was to re-load the page. Well, when a page is reloaded any in flight network requests are not being tracked anymore, which is why the request was showing as "cancelled" in my console tab. And that also explains why the api call was successful in updating the database, because there wasn't any problem with the actual request. Here's the steps I took to fix my problem:

1. remove the onClick event from my button that was calling my javascript function that begins the api call process
2. add this code to the form tag my button lives inside: @submit.prevent="myJavascriptFunctionThatStartsAPICall()"

Adding the .prevent prevents the default behavior of the page reloading from happening thus when the response is returned back to the page the page is still listening for it. Problem solved.

I hope this helps someone else out.

Answer 2

Its just the request status. In backend you should return status code 200 if everything is correct. Chrome thinks that the request got fail because you return a error code like 499 Client Closed Request or 444 No Response.