FormData File Upload with Progress Listener Content-Typeヘッダーがありません

Question

私はクライアントとしてWebサーバーとサーバー（JSPなし、）とWebフロントエンドを構築しています。私は通信のためにWebSocketsを使用し、XMLHttpRequestsとFormDataを使ってファイルをアップロードしたい（この投稿に続いてTrack ajax post progress for fileupload using jquery ajax and FormData）。私はxhr.upload.onprogressとアップロードの進行状況を追跡したいのですが、できるだけ早く私は、このような

xhr.upload.onprogress = function(e) {...}; 

または

xhr.upload.addEventListener("progress", function (e) {...}, false); 

としてリスナーを追加すると、私はこのようなサーバー側のエラーを取得：

org.apache.commons.fileupload.FileUploadBase$InvalidContentTypeException: the request doesn't contain a multipart/form-data or multipart/mixed stream, content type header is null 
    at org.apache.commons.fileupload.FileUploadBase$FileItemIteratorImpl.<init>(FileUploadBase.java:948) 
    at org.apache.commons.fileupload.FileUploadBase.getItemIterator(FileUploadBase.java:310) 
    at org.apache.commons.fileupload.FileUploadBase.parseRequest(FileUploadBase.java:334) 
    at com.awaker.server.HttpUploadServer.handle(HttpUploadServer.java:42) 
    at com.sun.net.httpserver.Filter$Chain.doFilter(Filter.java:79) 
    at sun.net.httpserver.AuthFilter.doFilter(AuthFilter.java:83) 
    at com.sun.net.httpserver.Filter$Chain.doFilter(Filter.java:82) 
    at sun.net.httpserver.ServerImpl$Exchange$LinkHandler.handle(ServerImpl.java:675) 
    at com.sun.net.httpserver.Filter$Chain.doFilter(Filter.java:79) 
    at sun.net.httpserver.ServerImpl$Exchange.run(ServerImpl.java:647) 
    at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1142) 
    at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:617) 
    at java.lang.Thread.run(Thread.java:745) 

私はアップロード要求を処理するためにApache Commons FileUploadフレームワークを使用します。

これはFirefoxとOpera（私がテストした唯一のブラウザ）で発生し、適切なContent-TypeヘッダーがFirebug/developerコンソールに表示されている間、サーバーはこのヘッダーを受け取りません（Content- 。

私はjQueryのAJAX

$.ajax({ 
      url: "http://host...", 
      type: "POST", 
      data: ajaxData, 
      cache: false, 
      contentType: false, 
      processData: false, 
      xhr: function() { 
       var xhr = jQuery.ajaxSettings.xhr(); 
       if (xhr.upload) { 
        xhr.upload.addEventListener("progress", function (e) { 
        console.log("hello"); 
        }, false); 
       } 
       return xhr; 
      } 
     }); 

やバニラJS

var xhr = new XMLHttpRequest(); 
xhr.upload.onprogress = uploader.uploadProgress; 
xhr.open("POST", "http://host..."); 
xhr.send(formData); 

私はいつも同じエラーを取得を使用する場合、それは問題ではありません。 onprogress-handlerを削除すると、すべて正常に動作します。 私はすでにこれを試しましたが、これは私にとってはうまくいきません。FormData boundary missing from content-type in POST request header

これを解決する方法は誰か分かりますか？ ありがとうございました！

編集： ajaxDataドロップイベントから生成されます。

var droppedFiles = e.originalEvent.dataTransfer.files; 
    var ajaxData = new FormData(); 
    ajaxData.append("file", droppedFiles[0]); 

のcontentType：falseオプションはjQueryの/ XHR自動的にneccessary境界とContent-Typeヘッダを追加することができます。このオプションは必須で、必須ではありません。

EDIT2： この作品は

$.ajax({ 
      url: "http://host...", 
      type: "POST", 
      data: ajaxData, 
      cache: false, 
      contentType: false, 
      processData: false, 
      xhr: function() { 
       var xhr = jQuery.ajaxSettings.xhr(); 
       return xhr; 
      } 
     }); 

罰金唯一の進捗リスナーを追加すると、違いはと思われます。

EDIT3：ここ でエラーが発生しますサーバーサイドコードです：

@Override 
public void handle(HttpExchange httpExchange) throws IOException { 
    DiskFileItemFactory diskFileItemFactory = new DiskFileItemFactory(); 
    ServletFileUpload fileUpload = new ServletFileUpload(diskFileItemFactory); 

    try { 
     List<FileItem> result = fileUpload.parseRequest(new HttpHandlerRequestContext(httpExchange)); 
     (...) 
    } catch (FileUploadException e) { 
     e.printStackTrace(); 
    } 

} 

私はこの答えhttps://stackoverflow.com/a/33827895/6655315を追いました。 HttpHandlerRequestContextは、リンクされた投稿に表示されているものとまったく同じです。

Edit4： ちょうどこの

xhr.upload.onprogress = function(e) {}; 

受信ヘッダがこれにこの

Accept-encoding: gzip, deflate 
Origin: http://localhost:63343 
Accept: */* 
Referer: http://localhost... 
Connection: keep-alive 
Host: localhost:4734 
Dnt: 1 
User-agent: Mozilla/5.0 (Windows NT 6.3; WOW64; rv:47.0) Gecko/20100101 Firefox/47.0 
Accept-language: de,en-US;q=0.7,en;q=0.3 
Content-type: multipart/form-data; boundary=---------------------------63422017421660 
Content-length: 333700 

から変更されているように、空のアップロード進捗ハンドラを追加することによって：

Accept-encoding: gzip, deflate 
Access-control-request-method: POST 
Origin: http://localhost:63343 
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 
Connection: keep-alive 
Host: localhost:4734 
Dnt: 1 
User-agent: Mozilla/5.0 (Windows NT 6.3; WOW64; rv:47.0) Gecko/20100101 Firefox/47.0 
Accept-language: de,en-US;q=0.7,en;q=0.3 

Answer 1

あなたが持っていますあなたの答えは例外です。

両方の例では、Content-Typeヘッダーが実際には存在しないように設定していませんでした。

Adding request headers to XHR

jQuery ajax API

私はまた、約FormData