Excel-reports\run http get gives error 406 with google chrome and IE, works fine with firefox

[nyoa]

I've run into a strange problem that has a lot to do with specific web browsers. My public dashboard has a chart that displays data from a data point, which works fine. It also has a download button that uses excel-reports\run to create a new report and then download it when it is ready. For some reason there is no problems with Firefox, but it gives (GET http://localhost:8080/rest/v1/excel-reports/run/XLT_211607 406 (Not Acceptable)) with google chrome. It doesn't work with IE either, but it seems to omit the 406 error and just gives an (Unable to get property 'id' of undefined or null reference) error which is a direct result of the http get not going through.

Here is the code I'm using to send the http get

			function createReport(theUrl, callback, option){
				var runReport = new XMLHttpRequest();
				runReport.onreadystatechange = function() { 
					if (runReport.readyState == 4 && runReport.status == 200)
						var object = JSON.parse(runReport.responseText);
						callback('http://localhost:8080/rest/v1/excel-reports/'+ object["id"], option);
				}
				runReport.open("GET", theUrl, true); // true for asynchronous 
				runReport.send(null);

[phildunlap]

Hmm. I seem to be able to navigate to a /rest/v1/excel-reports/run/XLT_176860 on one of my systems in both browsers. Can you show us where you construct that URL, "theUrl"?

[nyoa]

I construct theUrl when one clicks the download button. The strangest thing is that it works fine when using Firefox but gives the error with Chrome and IE

document.getElementById("DownloadXml").onclick = function (){createReport('http://localhost:8080/rest/v1/excel-reports/run/XLT_211607',verifyReport)};

[phildunlap]

Well, a 406 Error is a malformed request. I would compare the outgoing HTTP frames in the Chrome / Firefox network tab in the developer tools and see if the browse is making some assumption that is preventing it from working in that context. Perhaps a header like the content encoding is being set differently?

[nyoa]

I'll paste pictures of both requests here. Is my way of creating and sending the requests correct or could it be done differently?

EDIT: I tried the download with another computer in the same network and the error was a bit different. It was net::ERR_CONNECTION_REFUSED.

So the situation now is that I get error 406 when trying to use http get with the server computer, and connection refused when other machines try to use it. Is it possible that it is caused by the settings of my mango server?

ESIT 2: I changed the target url from localhost:8080 to serverip:8080 and the error changed to 403 access denied (This happened for all the browsers including firefox). I compared my request to a request send from the swagger UI and noticed that the one send from swagger had an X-Xsrf-Token. Is this required to send http requests to the mango server? And if it is, how do I create it on my page for the authenticated user?

The first is for firefox.

And the second is for Chrome.

[phildunlap]

Yes you must use the X-Xsrf-Token header. The value for this header is provided when you login, in a Set-Cookie header in the response. A 403 is an authorization issue. You can also pass that value in the Cookie header, as in your first image.

[nyoa]

@phildunlap

Thanks a bunch this made things a lot clearer to me. It appears that when I changed the locahlost:8080 to serverip:8080 it confused the browser to not send any cookies created for localhost when sending requests to serverip. Now everything works for firefox browsers again and chrome can send excel-reports/run request successfully. However now I get a 406 error when trying to get report status with get /v1/excel-reports/{id}.

Here is the piece of code responsible for this request.

			function verifyReport(theUrl){
				var verifyRequest = new XMLHttpRequest();
				verifyRequest.onreadystatechange = function() { 
					if (verifyRequest.readyState == 4 && verifyRequest.status == 200)
						var object = JSON.parse(verifyRequest.responseText);
						if (object["state"]=="FINISHED"){
								document.getElementById("loading_gif").style.visibility = "hidden";
								document.getElementById('download_frame').src = 'http://192.168.0.101:8080/rest/v1/excel-reports/download/'+ object["xid"];
								verifyRequest.open("DELETE",'http://192.168.0.101:8080/rest/v1/excel-reports/' + object["id"], true);
								console.log(object['id']);
								verifyRequest.send(null);
						}else{
							verifyReport('http://192.168.0.101:8080/rest/v1/excel-reports/'+ object["id"]);
						}
				}
				verifyRequest.open("GET", theUrl, true); 
				verifyRequest.send(null);
			};

Here is a picture of the not acceptable header

[nyoa]

@nyoa

Okay I got chrome working now. It seems that the requests were not acceptable because the Accept: condition was any/any and it was supposed to be 'application/json'

I just had to add a line of code in function(verifyReport)

verifyRequest.setRequestHeader("Accept","application/json");

There is still some problems with IE however, but I need to get the developer tools work correctly before I can start troubleshooting that.

[phildunlap]

Glad you got it going! Our support of IE is mixed (it should work, but it's not the target), so I may not be extremely helpful uncovering its idiosyncrasies.