Chrome giving webpage error: "ERR_CONTENT_LENGTH_MISMATCH"

Post topics, source code that relate to the Arduino Platform
 Reply

User avatar

Chrome giving webpage error: "ERR_CONTENT_LENGTH_MISMATCH"

By awwende
- Mon Sep 21, 2015 12:41 pm #29597 I'm not really sure what to make of this error. Here's my code:

Code: Select all#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>


ESP8266WebServer webserver(80);

String buildJavascript(){
  String javaScript;
  javaScript = "";
  javaScript += "<script type='text/javascript'>\n"; 
 

  javaScript += "function getDate()\n";
  javaScript += "{\n";
  javaScript += "var d= new Date();\n";
  javaScript += "var month = d.getMonth()+1;\n";
  javaScript += "var day = d.getDate();\n";
  javaScript += "var year = d.getFullYear().toString().substr(2,2);\n";
  javaScript += "document.getElementById(\"inputFileNameToSaveAs\").value=month+\"-\"+day+\"-\"+year;\n";
  javaScript += "}\n";

  javaScript += "function saveTextAsFile()\n";
  javaScript += "{\n";
  javaScript += "var textToWrite=\"Test\";\n";
  javaScript += "var textFileAsBlob = new Blob([textToWrite], {type:'text/plain', endings:'native'});\n";
  javaScript += "var fileNameToSaveAs = document.getElementById(\"inputFileNameToSaveAs\").value;\n";
  javaScript += "var downloadLink = document.createElement(\"a\");\n";
  javaScript += "downloadLink.download = fileNameToSaveAs;\n";
  javaScript += "downloadLink.innerHTML = \"Download File\";\n";
  javaScript += "if (window.webkitURL != null){\n";
  javaScript += "downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);\n";
  javaScript += "}\n";
  javaScript += "else{\n";
  javaScript += "downloadLink.href = window.URL.createObjectURL(textFileAsBlob);\n";
  javaScript += "downloadLink.onclick = destroyClickedElement;\n";
  javaScript += "downloadLink.style.display = \"none\";\n";
  javaScript += "document.body.appendChild(downloadLink);\n";
  javaScript += "}\n";
  javaScript += "downloadLink.click()\n";
  javaScript += "}\n";
  javaScript += "function destroyClickedElement(event){\n";
  javaScript += "document.body.removeChild(event.target);\n";
  javaScript += "}\n";

  javaScript+="function loadRelRef(){\n";
  javaScript+="var xmlhttp;\n";
  javaScript+="var txt,x,i;\n";
  javaScript+="if(window.XMLHttpRequest){\n";
  javaScript+="xmlhttp=new XMLHttpRequest();\n";
  javaScript+="}\n";
  javaScript+="else{\n";
  javaScript+="xmlhttp = new ActiveXObject(\"Microsoft.XMLHTTP\");\n";
  javaScript+="}\n";
  javaScript+="xmlhttp.onreadystatechange=function(){\n";
  javaScript+="if(xmlhttp.readyState==4 && xmlhttp.status==200){\n";
  javaScript+="xmlDoc=xmlhttp.responseXML;\n";
  javaScript+="txt=\"\";\n";
  javaScript+="x=xmlDoc.getElementsByTagName(\"R_VALUE\");\n";
  javaScript+="console.log(x)\n";
  javaScript+="document.getElementById(\"rr2\").value = Number(x[0].childNodes[0].nodeValue);\n";
  javaScript+="document.getElementById(\"tol_pos2\").value = Number(x[1].childNodes[0].nodeValue);\n";
  javaScript+="document.getElementById(\"tol_neg2\").value = Number(x[2].childNodes[0].nodeValue);\n";
  javaScript+="document.getElementById(\"rr3\").value = Number(x[3].childNodes[0].nodeValue);\n";
  javaScript+="document.getElementById(\"tol_pos3\").value = Number(x[4].childNodes[0].nodeValue);\n";
  javaScript+="document.getElementById(\"tol_neg3\").value = Number(x[5].childNodes[0].nodeValue);\n";
  javaScript+="document.getElementById(\"rr4\").value = Number(x[6].childNodes[0].nodeValue);\n";
  javaScript+="document.getElementById(\"tol_pos4\").value = Number(x[7].childNodes[0].nodeValue);\n";
  javaScript+="document.getElementById(\"tol_neg4\").value = Number(x[8].childNodes[0].nodeValue);\n";
  javaScript+="}\n";
  javaScript+="}\n";
  javaScript+="xmlhttp.open(\"GET\",\"xml\",true);\n";
  javaScript+="xmlhttp.send();\n";
  javaScript+="}\n";

  javaScript+="function loadTargets(){\n";
  javaScript+="var xmlhttp;\n";
  javaScript+="var txt,x,i;\n";
  javaScript+="if(window.XMLHttpRequest){\n";
  javaScript+="xmlhttp=new XMLHttpRequest();\n";
  javaScript+="}\n";
  javaScript+="else{\n";
  javaScript+="xmlhttp = new ActiveXObject(\"Microsoft.XMLHTTP\");\n";
  javaScript+="}\n";
  javaScript+="xmlhttp.onreadystatechange=function(){\n";
  javaScript+="if(xmlhttp.readyState==4 && xmlhttp.status==200){\n";
  javaScript+="xmlDoc=xmlhttp.responseXML;\n";
  javaScript+="txt=\"\";\n";
  javaScript+="x=xmlDoc.getElementsByTagName(\"T_VALUE\");\n";
  javaScript+="console.log(x)\n";
  javaScript+="document.getElementById(\"tar1\").value = Number(x[0].childNodes[0].nodeValue);\n";
  javaScript+="document.getElementById(\"tar2\").value = Number(x[1].childNodes[0].nodeValue);\n";
  javaScript+="document.getElementById(\"tar3\").value = Number(x[2].childNodes[0].nodeValue);\n";
  javaScript+="document.getElementById(\"tar4\").value = Number(x[3].childNodes[0].nodeValue);\n";
  javaScript+="document.getElementById(\"tar5\").value = Number(x[4].childNodes[0].nodeValue);\n";
  javaScript+="}\n";
  javaScript+="}\n";
  javaScript+="xmlhttp.open(\"GET\",\"xml\",true);\n";
  javaScript+="xmlhttp.send();\n";
  javaScript+="}\n";

 
  javaScript += "</script>\n";
  return javaScript;
}

void handleWebsite(){
  String htmlDoc;
  htmlDoc = "<!DOCTYPE html>\n";
  htmlDoc += "<html>\n";
  htmlDoc += "<head><title>My Sensor Configuration</title>" + buildJavascript() + "</head>\n";
  htmlDoc += "<body><h3>My Sensor Settings and Data Download</h3>\n";

  htmlDoc += "<style type=\"text/css\">.fieldset-auto-width{display:inline-block;}</style><div><fieldset class=\"fieldset-auto-width\"><style type=\"text/css\">\n";
  htmlDoc += ".tg  {border-collapse:collapse;border-spacing:0;}\n";
  htmlDoc += ".tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;}\n";
  htmlDoc += ".tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;}\n";
  htmlDoc += ".tg .tg-0ord{text-align:right}\n";
  htmlDoc += ".tg .tg-s6z2{text-align:center}\n";
  htmlDoc += "</style>\n";
  htmlDoc += "<table class=\"tg\">\n";
  htmlDoc += "<tr>\n";
  htmlDoc += "<th class=\"tg-s6z2\" colspan=\"4\">Relative Reflectance<br>Values</th>\n";
  htmlDoc += "<th class=\"tg-s6z2\" colspan=\"2\">Target Servo<br>Positions</th>\n";
  htmlDoc += "</tr>\n";
  htmlDoc += "<tr>\n";
  htmlDoc += "<td class=\"tg-031e\" colspan=\"2\" rowspan=\"2\"></td>\n";
  htmlDoc += "<td class=\"tg-s6z2\" colspan=\"2\">Tolerances</td>\n";
  htmlDoc += "<td class=\"tg-031e\"></td>\n";
  htmlDoc += "<td class=\"tg-031e\"></td>\n";
  htmlDoc += "</tr>\n";
  htmlDoc += "<tr>\n";
  htmlDoc += "<td class=\"tg-s6z2\">+</td>\n";
  htmlDoc += "<td class=\"tg-s6z2\">-</td>\n";
  htmlDoc += "<td class=\"tg-031e\"></td>\n";
  htmlDoc += "<td class=\"tg-031e\"></td>\n";
  htmlDoc += "</tr>\n";
  htmlDoc += "<tr>\n";
  htmlDoc += "<td class=\"tg-0ord\">RR2:</td>\n";
  htmlDoc += "<td class=\"tg-031e\"><input type=\"number\" step=0.001 id=\"rr2\" style=\"width: 5em\"></td>\n";
  htmlDoc += "<td class=\"tg-031e\"><input type=\"number\" step=0.001 id=\"tol_pos2\" style=\"width: 5em\"></td>\n";
  htmlDoc += "<td class=\"tg-031e\"><input type=\"number\" step=0.001 id=\"tol_neg2\" style=\"width: 5em\"></td>\n";
  htmlDoc += "<td class=\"tg-0ord\">Target 1:</td>\n";
  htmlDoc += "<td class=\"tg-031e\"><input type=\"number\" step=1 id=\"tar1\" style=\"width: 3em\"></td>\n";
  htmlDoc += "</tr>\n";
  htmlDoc += "<tr>\n";
  htmlDoc += "<td class=\"tg-0ord\">RR3:</td>\n";
  htmlDoc += "<td class=\"tg-031e\"><input type=\"number\" step=0.001 id=\"rr3\" style=\"width: 5em\"></td>\n";
  htmlDoc += "<td class=\"tg-031e\"><input type=\"number\" step=0.001 id=\"tol_pos3\" style=\"width: 5em\"></td>\n";
  htmlDoc += "<td class=\"tg-031e\"><input type=\"number\" step=0.001 id=\"tol_neg3\" style=\"width: 5em\"></td>\n";
  htmlDoc += "<td class=\"tg-0ord\">Target 2:</td>\n";
  htmlDoc += "<td class=\"tg-031e\"><input type=\"number\" step=1 id=\"tar2\" style=\"width: 3em\"></td>\n";
  htmlDoc += "</tr>\n";
  htmlDoc += "<tr>\n";
  htmlDoc += "<td class=\"tg-0ord\">RR4</td>\n";
  htmlDoc += "<td class=\"tg-031e\"><input type=\"number\" step=0.001 id=\"rr4\" style=\"width: 5em\"></td>\n";
  htmlDoc += "<td class=\"tg-031e\"><input type=\"number\" step=0.001 id=\"tol_pos4\" style=\"width: 5em\"></td>\n";
  htmlDoc += "<td class=\"tg-031e\"><input type=\"number\" step=0.001 id=\"tol_neg4\" style=\"width: 5em\"></td>\n";
  htmlDoc += "<td class=\"tg-0ord\">Target 3:</td>\n";
  htmlDoc += "<td class=\"tg-031e\"><input type=\"number\" step=1 id=\"tar3\" style=\"width: 3em\"></td>\n";
  htmlDoc += "</tr>\n";
  htmlDoc += "<tr>\n";
  htmlDoc += "<td class=\"tg-s6z2\" colspan=\"4\"></td>\n";
  htmlDoc += "<td class=\"tg-0ord\">Target 4:</td>\n";
  htmlDoc += "<td class=\"tg-031e\"><input type=\"number\" step=1 id=\"tar4\" style=\"width: 3em\"></td>\n";
  htmlDoc += "</tr>\n";
  htmlDoc += "<tr>\n";
  htmlDoc += "<td class=\"tg-s6z2\" colspan=\"4\"></td>\n";
  htmlDoc += "<td class=\"tg-0ord\">Target 5:</td>\n";
  htmlDoc += "<td class=\"tg-031e\"><input type=\"number\" step=1 id=\"tar5\" style=\"width: 3em\"></td>\n";
  htmlDoc += "</tr>\n";
  htmlDoc += "<tr>\n";
  htmlDoc += "<td class=\"tg-s6z2\" colspan=\"4\"><input type=button value=\"Default Values\" onclick=\"loadRelRef()\" style=\"width:100%\"></td>\n";
  htmlDoc += "<td class=\"tg-s6z2\" colspan=\"2\"><input type=button value=\"Default Values\" onclick=\"loadTargets()\" style=\"width:100%\"></td>\n";
  htmlDoc += "</tr>\n";
  htmlDoc += "<tr>\n";
  htmlDoc += "<td class=\"tg-s6z2\" colspan=\"4\"><input type=button value=\"Read From Test Box\" style=\"width:100%\"></td>\n";
  htmlDoc += "<td class=\"tg-s6z2\" colspan=\"2\"><input type=button value=\"Read From Test Box\" style=\"width:100%\"></td>\n";
  htmlDoc += "</tr>\n";
  htmlDoc += "</table></fieldset></div>\n";

  htmlDoc += "<h4>Download Data</h4>";
  htmlDoc += "<p>To save data:<ul><li>Keep the name as today's date, or<br>";
  htmlDoc += "enter a name for the file in the spot below.</li>";
  htmlDoc += "<li>Press \"Download Data\" to download and save test data.</li></ul></p>";
  htmlDoc += "<p>Save As:<input id=\"inputFileNameToSaveAs\"></input>";
  htmlDoc += "<button onclick=\"saveTextAsFile()\">Download Data</button></p>";
 
  htmlDoc += "</body>\n</html>\n";
  webserver.send(200,"text/html",htmlDoc);
}

void handleXML(){
  String XML;
  XML="<?xml version='1.0' encoding=\"UTF-8\"?>";
  XML+="<SETTINGS>";
  XML+="<REL_REFLECTANCE number=\"0\">";
  XML+="<R_VALUE>0.943</R_VALUE>";
  XML+="<R_VALUE>0.02</R_VALUE>";
  XML+="<R_VALUE>0.02</R_VALUE>";
  XML+="</REL_REFLECTANCE>";
  XML+="<REL_REFLECTANCE number=\"1\">";
  XML+="<R_VALUE>0.493</R_VALUE>";
  XML+="<R_VALUE>0.03</R_VALUE>";
  XML+="<R_VALUE>0.03</R_VALUE>";
  XML+="</REL_REFLECTANCE>";
  XML+="<REL_REFLECTANCE number=\"2\">";
  XML+="<R_VALUE>0.100</R_VALUE>";
  XML+="<R_VALUE>0.03</R_VALUE>";
  XML+="<R_VALUE>0.01</R_VALUE>";
  XML+="</REL_REFLECTANCE>";
  XML+="<TARGET number=\"0\">";
  XML+="<T_VALUE>180</T_VALUE>";
  XML+="</TARGET>";
  XML+="<TARGET number=\"1\">";
  XML+="<T_VALUE>130</T_VALUE>";
  XML+="</TARGET>";
  XML+="<TARGET number=\"2\">";
  XML+="<T_VALUE>87</T_VALUE>";
  XML+="</TARGET>";
  XML+="<TARGET number=\"3\">";
  XML+="<T_VALUE>48</T_VALUE>";
  XML+="</TARGET>";
  XML+="<TARGET number=\"4\">";
  XML+="<T_VALUE>5</T_VALUE>";
  XML+="</TARGET>";
  XML+="</SETTINGS>";
  webserver.send(200,"text/xml",XML);
}

void handleNotFound() {
  webserver.send(404, "text/plain", "Page not found ...");
}

void setup(){
  WiFi.mode(WIFI_AP);
 
  uint8_t mac[WL_MAC_ADDR_LENGTH];
  WiFi.softAPmacAddress(mac);
  String macID = String(mac[WL_MAC_ADDR_LENGTH - 2], HEX) +
                 String(mac[WL_MAC_ADDR_LENGTH - 1], HEX);
  macID.toUpperCase();
  String AP_NameString = "ESP8266 " + macID;

  char AP_NameChar[AP_NameString.length() + 1];
  memset(AP_NameChar, 0, AP_NameString.length() + 1);

  for (int i=0; i<AP_NameString.length(); i++)
    AP_NameChar[i] = AP_NameString.charAt(i);
  WiFi.softAP(AP_NameChar, "admin207");
  webserver.on("/", handleWebsite);
  webserver.on("/xml", handleXML);
  webserver.onNotFound(handleNotFound);
  webserver.begin();
}

void loop(){
  webserver.handleClient();
}


When I run that, I get the "ERR_CONTENT_LENGTH_MISMATCH" in Chrome. Trying it on Firefox and IE also didn't work. I built up the HTML first and then started adding the JS, so I thought maybe that was the problem. However when I change handleWebsite() to the following, it works without a problem. All I did was remove the table, and styling, and just kept the input and button tags.

Code: Select allvoid handleWebsite(){
  String htmlDoc;
  htmlDoc = "<!DOCTYPE html>\n";
  htmlDoc += "<html>\n";
  htmlDoc += "<head><title>My Sensor Configuration</title>" + buildJavascript() + "</head>\n";
  htmlDoc += "<body><h3>My Sensor Settings and Data Download</h3>\n";

  htmlDoc += "RR2:<input type=\"number\" step=0.001 id=\"rr2\" style=\"width: 5em\"><br><br>\n";
  htmlDoc += "Tol2:<input type=\"number\" step=0.001 id=\"tol_pos2\" style=\"width: 5em\"><br><br>\n";
  htmlDoc += "Tol2:<input type=\"number\" step=0.001 id=\"tol_neg2\" style=\"width: 5em\"><br><br>\n";
  htmlDoc += "RR3:<input type=\"number\" step=0.001 id=\"rr3\" style=\"width: 5em\"><br><br>\n";
  htmlDoc += "Tol3:<input type=\"number\" step=0.001 id=\"tol_pos3\" style=\"width: 5em\"><br><br>\n";
  htmlDoc += "Tol3:<input type=\"number\" step=0.001 id=\"tol_neg3\" style=\"width: 5em\"><br><br>\n";
  htmlDoc += "RR4:<input type=\"number\" step=0.001 id=\"rr4\" style=\"width: 5em\"><br><br>\n";
  htmlDoc += "Tol4:<input type=\"number\" step=0.001 id=\"tol_pos4\" style=\"width: 5em\"><br><br>\n";
  htmlDoc += "Tol4:<input type=\"number\" step=0.001 id=\"tol_neg4\" style=\"width: 5em\"><br><br>\n";
  htmlDoc += "<input type=button value=\"Load RRs\" onclick=\"loadRelRef()\"><br><br>\n";
  htmlDoc += "Target 1:<input type=\"number\" step=1 id=\"tar1\" style=\"width: 3em\"><br><br>\n";
  htmlDoc += "Target 2:<input type=\"number\" step=1 id=\"tar2\" style=\"width: 3em\"><br><br>\n";
  htmlDoc += "Target 3:<input type=\"number\" step=1 id=\"tar3\" style=\"width: 3em\"><br><br>\n";
  htmlDoc += "Target 4:<input type=\"number\" step=1 id=\"tar4\" style=\"width: 3em\"><br><br>\n";
  htmlDoc += "Target 5:<input type=\"number\" step=1 id=\"tar5\" style=\"width: 3em\"><br><br>\n";
  htmlDoc += "<input type=button value=\"Load Targets\" onclick=\"loadTargets()\"><br><br>\n";

  htmlDoc += "<h4>Download Data</h4>";
  htmlDoc += "<p>To save data:<ul><li>Keep the name as today's date, or<br>";
  htmlDoc += "enter a name for the file in the spot below.</li>";
  htmlDoc += "<li>Press \"Download Data\" to download and save test data.</li></ul></p>";
  htmlDoc += "<p>Save As:<input id=\"inputFileNameToSaveAs\"></input>";
  htmlDoc += "<button onclick=\"saveTextAsFile()\">Download Data</button></p>";
 
  htmlDoc += "</body>\n</html>\n";
  webserver.send(200,"text/html",htmlDoc);
}


Can anyone help me figure out what's going on here? It feels like a memory issue, but when I print the heap, it tells me I still have about 10k free.
User avatar

Re: Chrome giving webpage error: "ERR_CONTENT_LENGTH_MISMATC

By awwende
- Thu Sep 24, 2015 7:14 pm #29819 That was the avenue I was thinking I needed to head down. How do I go about implementing that? In my setup I added :
Code: Select allwebserver.on("/myscripts.js", handleJavascript);

Then I changed the buildJavascript string function to this:

Code: Select allvoid handleJavascript(){
  String javaScript;
  javaScript += ......javascript fuctions
 webserver.send(200,"text/javascript",javaScript);
}


In my html file I replace "html += "buildJavascript();" with:

Code: Select allhtmlDoc += "<script scr=\"/myscripts.js\"></script>";


I can go to the IP/myscripts.js and it just shows up as text, which kinda(?) makes sense, the data is at least there. However none of my functions work. Not sure what I'm doing wrong.
 Reply
Return to Arduino