踩坑避雷——关于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 size
        Update.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 progress
        Serial.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开发过程中踩坑，如果有直接拿该例程能正常跑起来的小伙伴也希望告知一下，我是不明白为什么例程会有错误，感谢