AJAX 錯誤：“內容類型中沒有多部分邊界參數”

Question

我正在嘗試將文件從本地主機上傳到服務器，但在我的網絡控制台中出現以下錯誤，狀態代碼為 500：

Content-Type 中沒有多部分邊界參數

我在我的 nginx 反向代理上啟用了cors 。 我的 AJAX 請求是這樣的：

var files = document.getElementById('candidatePhoto').files;
if (!files.length) {
  return alert('Please choose a file to upload first.');
}
var file = files[0];

var form = new FormData();
form.append("files", file);

var settings = {
  "async": true,
  "crossDomain": true,
  "url": "http://example.com",
  "method": "POST",
  "headers": {
    "Content-Type": "multipart/form-data"
  },
  "processData": false,
  "contentType": false,
  "data": form,
  success: function(data) {
    console.log("Success", data);
    addPhoto(data);
  },
  error: function(err) {
    console.log("Error", err);
    alert("Error: " + err);
  }
}

我的 HTML 表單也有enctype='multipart/form-data'

Answer 1

如果您設置contentType: false jQuery 將自動應用正確的 Content-Type 標頭來發送多部分數據。 您包含明確指定內容類型的header對象正在破壞這種行為。 它需要被移除。 將您的 AJAX 請求設置更改為：

var settings = {
  async: true,
  crossDomain: true,
  url: "http://example.com",
  method: "POST",
  processData: false,
  contentType: false,
  data: form,
  success: function(data){
    console.log("Success", data);
    addPhoto(data);
  },
  error: function(err) { 
    console.log("Error", err);
    alert("Error: " + err);
  }
}