踩坑避雷——关于ESP32的WEB-OTA例程404/NOT FOUND报错

最近因为项目需要，所以在着手开发ESP32，这几天在做OTA，使用arduino中的示例OTAWebUpdater时。当我打开网页点击update后，出现了网页报错404。

然后我就愣住了，看到其他的博客写着都是可以靠这个例程升级成功的。按下F12打开开发者工具，可以看到当在添加升级文件时，网页时正常响应的

         但是当我点击update跳转以后，就报错了，报错的内容也可以看到，是这个名称为serverindex的POST方法没有找到。

回到例程源码中，我们可以看到

server.on("/", HTTP_GET, []() {server.sendHeader("Connection", "close");server.send(200, "text/html", loginIndex);});server.on("/serverIndex", HTTP_GET, []() {server.sendHeader("Connection", "close");server.send(200, "text/html", serverIndex);});/*handling uploading firmware file */server.on("/update", HTTP_POST, []() {server.sendHeader("Connection", "close");server.send(200, "text/plain", (Update.hasError()) ? "FAIL" : "OK");ESP.restart();}, []() {HTTPUpload& upload = server.upload();if (upload.status == UPLOAD_FILE_START) {Serial.printf("Update: %s\n", upload.filename.c_str());if (!Update.begin(UPDATE_SIZE_UNKNOWN)) { //start with max available sizeUpdate.printError(Serial);}} else if (upload.status == UPLOAD_FILE_WRITE) {/* flashing firmware to ESP*/if (Update.write(upload.buf, upload.currentSize) != upload.currentSize) {Update.printError(Serial);}} else if (upload.status == UPLOAD_FILE_END) {if (Update.end(true)) { //true to set the size to the current progressSerial.printf("Update Success: %u\nRebooting...\n", upload.totalSize);} else {Update.printError(Serial);}}});

 这里面写了服务端的三种方法，分别是没有后缀的GET（登陆界面），/serverIndex的GET和/update的POST。那么可以看出来，是我们网页上的跳转未能正确的导向/update的POST而是导向了/serverIndex的POST，而后者未定义，所以导致了页面的404错误。

/** Server Index Page*/const char* serverIndex =
"<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>"
"<form method='POST' action='#' enctype='multipart/form-data' id='upload_form'>""<input type='file' name='update'>""<input type='submit' value='Update'>""</form>""<div id='prg'>progress: 0%</div>""<script>""$('form').submit(function(e){""e.preventDefault();""var form = $('#upload_form')[0];""var data = new FormData(form);"" $.ajax({""url: '/update',""type: 'POST',""data: data,""contentType: false,""processData:false,""xhr: function() {""var xhr = new window.XMLHttpRequest();""xhr.upload.addEventListener('progress', function(evt) {""if (evt.lengthComputable) {""var per = evt.loaded / evt.total;""$('#prg').html('progress: ' + Math.round(per*100) + '%');""}""}, false);""return xhr;""},""success:function(d, s) {""console.log('success!')""},""error: function (a, b, c) {""}""});""});""</script>";

 上面为serverIndex的服务端js代码，本人对js一窍不通，只好去咨询学前端的女友，奈何女友学术不精，只能自己找办法。最终我找到了一些关于post跳转的文章

https://www.jianshu.com/p/712287711c6a

在这个文章中，指出了表单post的方法需要往action中添加后缀，而例程代码中action='#'（其实在图2的错误跳转地址中就能发现404页面serverIndex后面多了个#）。所以解决方法就是将js代码中的action='#'改为action='/update'即可

        由于本人对js一窍不通，从js部分代码的字面下面几行是写了url：‘/update’，但是实际跳转的时候却没有按照程序来，还希望懂js的大神看到这篇博客时能够给我个解答，当然本文只是为了防止大家在esp32开发过程中踩坑，如果有直接拿该例程能正常跑起来的小伙伴也希望告知一下，我是不明白为什么例程会有错误，感谢