AJAX 错误：“内容类型中没有多部分边界参数”

Question

我正在尝试将文件从本地主机上传到服务器，但在我的网络控制台中出现以下错误，状态代码为 500：

Content-Type 中没有多部分边界参数

我已经启用cors了我的 nginx 反向代理。我的 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: falsejQuery 将自动应用正确的 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);
  }
}