XHR Upload Progress, HTTP/2 and antivirus - javascript

I have switch to http/2 and apache but upload progress does not work anymore.
I have track event.loaded in console and It reaches too fast 100% when the real upload is not finished, sometimes it's just started.
When i switch back to HTTP/1.1 all working fine with same function.
I have search all day about that problem and found some interesting post where other users report that anivirus was problem. On my pc i have Eset Internet Security and when i disable HTTPS scaning xhr progress is working normal. But also when i enable antivirus but disable http2 on site upload progress working fine. So only with http2 and antivirus enabled i have this problems.
There is any solution for this?
This is example and part of code which should back progress of upload.
function uploadFile_() {
var filedata = new FormData();
filedata.append("file1",file);
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", progressHandler, function(e) {
if (prevLoaded !== 0 && e.loaded <= prevLoaded) {
xhr.abort();
return;
}
prevLoaded = e.loaded;
},false);
xhr.addEventListener("load", completeHandler, false);
xhr.addEventListener("error", errorHandler, false);
xhr.addEventListener("abort", abortHandler, false);
xhr.open("POST", 'https://example.com/upload-api/video',true);
xhr.withCredentials = true;
xhr.send(filedata);
}
function progressHandler(event) {
var percent = (event.loaded / event.total)*100;
console.log(percent);
}

This is what i did
added a new loaction to handle upload
location = /upload {
proxy_pass http://localhost:80/upload.bin;
}
now with http2 post request the file is getting uploaded also working on http1.1
Answer by for my question by #Ferrybig
This is intentional.
NGINX knows that your renderer for a 405 error doesn't need any body, so with HTTP, it discards any received data. This is really how HTTP1.1 has been designed.
With HTTP2, it becomes smarter, it tells the other side to abort sending data, and sends the resulting page. This is done to prevent wasting internet packets for data that is going to be discarded anyway.
The way HTTP2 and higher works, is just smarter and wastes less of your data for things that are already known (for example, if you need to login for a file upload, it just tells the client as soon as possible that there is an error, instead waiting until your full file has been uploaded)
When you send a request to a .php file, the php process takes it over, and it doesn't have a way to instantly return a result, so NGINX streams the whole page to php before showing the error, because PHP only starts executing the code on the page once the file has been received, and it might do something with the POST request

Related

Trouble with XML requests and google chrome extensions

I'm trying to make an XML request inside the content.js file of a chrome extension I am making. I'm having trouble, however, making the request, and adding the appropriate event listeners. In the current configuration, the open after the listeners, the console says my request needs to be open before being sent, although you'll note that the send method is only called in the callback function when the request has been loaded. In the case that I put the open before the event listeners, the console says that the request has been aborted. If there is a better way of requesting and parsing XML data within a google chrome extension application, I would appreciate any advice. I've left the link in so you can see what type of XML data I'm dealing with.
var l = "https://video.google.com/timedtext?lang=en&v=5MgBikgcWnY";
function addScript () {
$(document).ready(function() {
$('#related').prepend('<div id="script-box" class="col s12"></div>');
$('#script-box').append('<h3 id="script-title">Quote</h3>');
var xhr = new XMLHttpRequest();
xhr.addEventListener("progress", console.log("The download is still in progress"));
xhr.addEventListener("abort", console.log("This process has been aborted"));
xhr.addEventListener("load", parseXML(xhr));
xhr.addEventListener("error", console.log("An error has ocurred."));
xhr.open('get', l, true);
});
}
function parseXML(r) {
r.send();
var result = r.responseText;
console.log(result);
}

AJAX - Failed to load resource: net::ERR_EMPTY_RESPONSE

I'm running some javascript which uses a setInterval to trigger an AJAX request and then performs some actions based on the returned output. I'm quite confused with it, because it works perfectly on my home server, but now that I've put it out onto the web, I'm having problems.
The following error appears on Google Chrome:
http://www.domain.com/ajax/sound.php
Failed to load resource: net::ERR_EMPTY_RESPONSE
The error doesn't occur consistently however. Sometimes the scripts run for several minutes before an error occurs. Sometimes it all breaks down in seconds.
I've already checked the obvious solution - that my server-side script is returning nothing. I did this by commenting out the entire script and having it do nothing but return information. That didn't help.
I have several AJAX requests running from the same page, and all of them eventually return the same error (with their respective pages of code). I've tried isolating the requests and performing them one at a time at a slowed down rate, and have determined that the requests work in a general sense, but as soon as one of them sends an error, they all completely stop working and start sending the same error.
Once the errors occur, I get no response when I try to access any part of my site (even parts with no AJAX). Safari says "...the server unexpectedly dropped the connection. This sometimes occurs when the server is busy. Wait for a few minutes, and then try again." I've tried this in Explorer, Chrome, and Firefox as well with similar results. Thankfully, the site does come back up after a few minutes of making no AJAX requests.
An example of one of the AJAX requests is as follows:
//At the set interval, we create a string for the request:
function alef(){
string = "a='a'";
request(sound, "ajax/sound.php", string);
}
//That function fires off an AJAX request:
function request(fix, url, string){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
fix(xhttp.responseText);
}
}
xhttp.open("POST", url, true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send(string);
}
//The AJAX request returns a result to be processed by the following function:
function sound(text){
if(text == "sound"){
insound.play();
}
}
Presume that my sound.php files says:
<?php echo "sound"; ?>
It doesn't say only that, but even when it did for testing purposes, I had the same problem.
Any solutions?

File API - HTML5 App to store videos

I'd like to know if HTML5 API may fit this use case:
some videos are present on a public server (say http://videosanbox.me/video.mpg)
the JS/html5 app should store the videos locally in order to be able to play them also off-line (videos are public, there are no security
warnings)
In my initial tests I am unable to go past the "No 'Access-Control-Allow-Origin'" error.
In my understanding the following script should:
request with a get the content located at the given URL
prepare 1Mb file somewhere (I assume I'll have other errors here, but I'll get there when I'll see them:))
for now I'm interested in understanding why this error is happening, wouldn't it be normal for a client (a mobile browser) to query for resources which are not already on it?
window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://videosanbox.me/video.mpg', true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
window.requestFileSystem(TEMPORARY, 1024 * 1024, function(fs) {
fs.root.getFile('video.mpg', {create: true}, function(fileEntry) {
fileEntry.createWriter(function(writer) {
writer.onwrite = function(e) { alert('writing'); };
writer.onerror = function(e) { alert('error'); };
var blob = new Blob([xhr.response], {type: 'video/mpg'});
writer.write(blob);
}, onError);
}, onError);
}, onError);
};
xhr.send();
onError is just doing something in case of error: function onError(e) {console.log('Error', e);}
Solution 1
On the server side, you need this header to be passed:
header('Access-Control-Allow-Origin: *');
Unfortunately, that may not be possible if you don't have control over videosanbox.me. If not, contact them and see if they're willing to allow this. If not, don't worry, there's a second solution:
Solution 2
Create a web page on your own server and allow cross site scripting (but use security to restrict who can use this page). In that page's code, it will take the request and open an HTTP connection to http://videosanbox.me, retrieve the mpg file and spit it back to the PhoneGap app as a Blob. Your PhoneGap would connect to this page (on your server) via Ajax instead of http://videosanbox.me.

Changing path type causes ajax to fail?

I found this bizarre, but I recently change all my paths from relative to absolute.
I see that ajax appears to be working fine in the console as I can see the files retrieved successfully, with a status of 200.
Here is a pic: (its small but hopefully you can make out the status 200)
However, my callback functions stopped running, here is the code:
if (config_ajax.type === 'get') {
xhr = new win.XMLHttpRequest();
xhr.open('GET', config_ajax.url, true);
xhr.onload = function () {
if (this.status === 200) {
$A.log('succeeded with status 200'); // never gets here
config_ajax.callback(xhr.responseText);
}
};
xhr.send(null);
}
you have an incorrectly formatted request to the server as shown in firebug
http://www.arcmarks.com/http://www.arcmarks.com/arcmarks/source/class.CMachine.php
note the http://www shows twice
If the page is at arcmarks.com, it cannot make AJAX requests to www.arcmarks.com - browsers enforce something called the Same Origin Policy which prevents you from sending AJAX requests to any domain other than the exact one the original page was served from.
Also, the comment about the request being sent to www.www.arcmarks.com is right - as the code adds a "www" to the current URL, if your URL has a www in it already it will be repeated. But I'm assuming this was intentional.

AJAX status 12030

I am sending an ajax XMLHttpRequest using the POST method. When the request is sent, I am getting a readyState of 4 with a status of 12030. I know 12030 is a Microsoft specific state code that indicate the connection was not sustained. However, I can't seem to find where my code would be causing this error. If I navigate to the page without using the ajax request, it loads fine. Below is the javascript method and the call line.
AJAX Method
/*Sends ajax request with post data that updates the content view via ajax on completion
* #param message : message after completion of ajax request
* #param url : url to request
* #param params : post parameters as string
*/
function changeAjaxPost(message, url, params) {
var ajx;
if (window.HXMLHttpRequest) {
UtilLogger.log(HtmlLogger.FINE, "Using XMLHttpRequest");
ajx = new XMLHttpRequest();
}
else {
UtilLogger.log(HtmlLogger.FINE, "Using ActiveXObject");
ajx = new ActiveXObject("Microsoft.XMLHTTP");
}
ajx.open("POST", url, true);
ajx.setRequestHeader("X-Requested-With", "XMLHttpRequest");
ajx.setRequestHeader("Content-Type", "text/html");
ajx.setRequestHeader("Content-length", params.length);
ajx.setRequestHeader("Connection", "close");
ajx.send(params);
ajx.onreadystatechange = function () {
document.write(ajx.readyState + ":" + ajx.status);
if (ajx.readyState == 4 && ajx.status == 200) {
alert(message);
updateContent();
}
else if (ajx.readyState == 4 && ajx.status == 400) {
alert("Page Error. Please refresh and try again.");
}
else if (ajx.readyState == 4 && ajx.status == 500) {
alert("Server Error. Please refresh and try again.");
}
}
}
Call Line
changeAjaxPost("Excerpt Saved", "./AJAX/myadditions_content.aspx", params);
http://danweber.blogspot.com/2007/04/ie6-and-error-code-12030.html
IE6 and error code 12030
If you are running Internet Explorer 6 and using Ajax, you may get some XMLHttpRequests terminated with code 12030.
Microsoft's knowledge base at http://support.microsoft.com/kb/193625 shows that this code is
12030 ERROR_INTERNET_CONNECTION_ABORTED
The connection with the server has been terminated.
Googling turned up no help; the people encountering this don't seem to be aware of how network sockets work, so I had to actually figure it out on my own.
This happens when the client thinks a connection has been kept open, and the server thniks it is closed. The server has sent a FIN, and the client has responded to that with an ACK. Running "netstat" on the Windows client shows that the connection is in the CLOSE_WAIT state, so IE6 really ought to have realized this before trying. This is entirely the client's fault. If you wait about 60 seconds, the Windows OS stack will retire the connection.
If you need to support IE6, you have some solutions, in various degrees of ugly:
retry the ajax request in case of error code 12030
if the browser is ie, send an empty request to the server ahead of each ajax request
bundle up your ajax requests such that the time between them is ( (greater than server_timeout) AND (less than server_timeout + one minute)
IE7, fwiw, will issue a RST over the CLOSE_WAIT socket as soon as it realizes it has an outgoing connection to make. That, and the socket will only stay in that CLOSE_WAIT state for about 5 seconds anyway.
Sometimes, using
setRequestHeader("Connection","close");
can cause problems in some browsers.
Removing this solves the problem.
Credit goes to #MikeRobinson

Categories