Develop Reference

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

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.

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:
remove the onClick event from my button that was calling my javascript function that begins the api call process
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.

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.

Cross-domain interactions with a Java Servlet

I have a JavaScript web app on my server and I'm looking at the possibility of doing an AJAX connection with an existing Java servlet on a different server. I'm collaborating with the servlet developer, but he is currently dealing with other projects, and I'm trying to see how much I can get done without him needing to do anything. He's not too familiar with JS and I don't have any Java experience... but we've got a lot of good intentions!
His servlet has an HTML form interface sending a POST request. As a first step I downloaded his form, uploaded it to my server and changed the form's action to an absolute URL, from
<form action="/path/to/Servlet" [...] >
to
<form action="http://remoteserver.com/path/to/Servlet" [...] >
When I test the form on his server, it works fine, but when I test with the same exact input on the form on my server, the server returns a 500 error with a Java exception:
java.lang.NullPointerException
Filechange_b2.doPost(Filechange_b2.java:322)
javax.servlet.http.HttpServlet.service(HttpServlet.java:648)
javax.servlet.http.HttpServlet.service(HttpServlet.java:729)
org.apache.tomcat.websocket.server.WsFilter.doFilter(WsFilter.java:52)
I realize that this is a bit of a black box problem, but based on these clues, is there anything I can do from my end? It's my understanding that a form request wouldn't trigger any CORS-related security issues; my hunch based on the code here is that there is something in his code that is relying on the assumption that input is coming from a local page.
Any ideas to go on here? Thanks very much for your help.
EDIT: Okay, looks like the JSP/Java interaction is more complicated than I originally thought and involves passing a session ID back and forth. That at least gives me something more to go on. Yay learning!

Session value not update after redirect the page

I have a form, when i submit that form it post to another page, on that page i will set value of post in session, on that time session show current value which is right, after executing the script, it will submit to another third arty tool, the response of this third party tool going to another page which is belong to our app, at that time session display past value, when I load or refresh the page, then it shows current value? I am stuck there, don't know why it's happening and what is the solution of that, I research lot but didn't get any success? if some one help me, I would be very thank full to him.
The third party response is in post the code of that page is
if (isset($_POST)){
var_debug($_SESSION['reservation']);
exit();
}
on that script it shows past values, when I refresh or reload the page then it shows current session value

Maybe you can provide a code snippet? Or maybe make your question a bit clearer (about the third party tool). Or maybe you can check this http://prajapatinilesh.wordpress.com/2007/09/14/how-to-solve-php-session-problem/
Hope this works!

$.getJSON on chrome extension fails to work properly

I'm creating a chrome extension, and want to be able to get a profile picture from a username. Unfortunately, there isn't an api for the website and there is no correlation between the profile URL and the profile name. I figured I could hijack the search ajax and use it to achieve my goal. Unfortunately, it doesn't seem to be working. I've added the permissions, and it isn't running in a content script, but it's still not working.
$.getJSON("http://www.website.com/user/search",{user:name},function(a){
alert(1);
alert(a.data);
});
It's failing silently, as nothing is happing. Yet, I can't figure out why.
The json I should be receiving from the call (browsed to the site manually) is:
{"error":false,"action":null,"one":true,"data":143217}
Unfortunately it's not working. JSONP isn't an option, as the site obviously has no need of supporting it, so help me please. I don't see what I'm doing wrong.
EDIT: I see the problem. When I try to do the request I'm being redirected to user/search ( no ?user) which fails.

The site you're trying to reach requires authentication before allowing a search to occur. You won't get a response from your ajax request, because the server is looking for a session with login credentials to allow the search to happen. Because your ajax is not authenticated, and does not have the session established, your request doesn't "fail", it is simply getting the server's 302 redirect response.
You would need to 'sign in' to the page you are trying to query in order to establish the session and any necessary variables before you would be able to proceed with your user search.

It could be entirely possible that the website's search API isn't returning the Content-type header as text/json, which is required for $.getJSON to function correctly.
Try simply using $.get and calling JSON.parse on the returned data.

header(Location:) via AJAX not redirecting

First off, let me say that I know this does not seem like an uncommon issue. I do not intend to clutter these forums with questions that have already been answered, but, I have worked through probably about 3 dozen threads with similar issues and have been unable to reach a solution.
The short description of my issue is this: I am trying to redirect after submitting a form using php's header(location:) function, and it's not redirecting. It is a little bit complicated because the form is submitted via AJAX. The steps my code goes through are as follows:
User submits form > form data sent via AJAX > form processing page validates data > if valid, form processing page inserts data into database > if submission is successful, form processing page adds redirect URL to $_SESSION > form processing page returns a 'redirect' variable > javascript/AJAX checks for redirect variable, and refreshes page if found > page header checks $_SESSION for redirect URL, and if found, sets appropriate headers and exits.
I guess the first thing I want to ask is, is this the right way of going about this? It seems to me that there should be a simpler way of doing this. It's obviously much simpler to pass the redirect URL to the javascript and do a window.location redirect, but I read that it's much better/more secure to handle that on the server side, so I'm trying to do that.
Assuming I'm going about this in the right direction, what could be going wrong here? I've checked for leading and trailing whitespace, BOM characters, I've even tried output buffering and I still have the same issue.
What happens on form submission is, the page refreshes, but it returns to the original form page rather than the redirect url. I have turned on the most detailed error reporting and get no errors at all.
One thing that may or may not be of interest, I have an error_log function set up to log all headers to a file right after I set the Location: header. When I redirect outside of AJAX (which works), the accept: header is set to html, but when I try to do it via AJAX, the accept header is set to JSON. Could that cause a problem?
Thank you so much for taking the time, and again, apologies if this is a dumb question. I have used this forum for years and have never once had to post a question on it because it has always solved my problems until now. Thanks in advance!

PHP is too generous to include in your code not only HTML code, but also JavaScript code. I'll explain one thing. When you send data by ajax, it is often difficult return Boolean data (whether true or false, depending on the conditions we work side server with php in some file established in our direction ajax) to give a final answer.
On the other hand, returning to the generosity of PHP, always when we try to validate data server-side and through ajax, we can manipulate the section where work freely to show some response message, a redirect to somewhere on your page or create a session. Anyway, whatever.
What I mean is that in your controller section where you will work with AJAX, you can set different conditions. That is, if the user data are correct, then you could send to call a script from Javascript to redirect him with a location.reload (); and also assign a session automatically. If the user does not have the correct data, then what we should do is return a warning message or alert to the exit AJAX, usually it goes after a:
function (response) {
$ ('.answer').html(response);
}
Note that it is not necessary require, for example, a $ ('.answer').html(response); to return an answer, because ajax only sends data to the server and if there is a reply message well, and if not well. Many times what I do, is to send messages via console, although it is often convenient to do so, because as often work with several conditions and that depends on the result of our request, we will be forced to show some response in some element within our code.
What I advise you is that you work javascript in PHP, and hence redirect to other pages, assign sessions or simply return a message. Remember that an ajax request is not only asynchronous, but repetitive and can send it to call as often as you need. The fact that you sent your ajax call php file and you have returned an answer, does not mean you can go back to work with it once you finish your ajax request.
It is the right way to do what you want, it is often easier to manipulate our server-side code that client side. Greetings.