SpringBoot/Fetch：无效的 MIME 类型 "undefined"：不包含“/”

Question

我正在尝试使用表单数据发出 post 请求，其中包含一个文件和一个 Json 对象。

为了执行此操作，我根据以下 post 将 Content-Type 设置为 undefined

This causes the browser to set the Content-Type to multipart/form-data and fill the boundary correctly.

但是，在 (springboot) 服务器端，我收到此错误消息：

Resolved exception caused by Handler execution: org.springframework.web.HttpMediaTypeNotSupportedException: Invalid mime type "undefined": does not contain '/'

因此，浏览器似乎未正确管理 "undefined" 内容类型。

这是客户端的获取命令：

    // My document blob
    var documentBlob = new Blob([JSON.stringify({ documentName: "toto" })], {
      type: "application/json"
    });

    // My Form data containing a file and the document blob
    var formData = new FormData();
    formData.append("file", this.state.file);
    formData.append("document", documentBlob);

    // Fetch command
    fetch("/document/", {
      method: "POST",
      headers: {
        "Content-Type": undefined
      },
      data: formData
    }).then(function(response) {
      console.log("response!");
    });

这里是服务器端（spring启动休息控制器）：

@RestController
@RequestMapping("/document")
public class DocumentController {

    @Autowired
    private DocumentRepository documentRepository;  

    @RequestMapping(value = "/", method = RequestMethod.POST, consumes = { "multipart/form-data" })
    public boolean addDocument(@RequestPart("document") Document document, @RequestPart("file") MultipartFile file) {
        documentRepository.save(document);
        return true;
    }
}

"Document" 是一个简单的 pojo :

@Entity
public class Document {
    private String documentName;

    public Document() {
    }

    public Document(String documentName) {
        this.setDocumentName(documentName);
    }

    public String getDocumentName() {
        return documentName;
    }

    public void setDocumentName(String documentName) {
        this.documentName = documentName;
    }
}

所以，我真的不知道问题出在客户端还是服务器端。

谢谢！

////////////////////////////

编辑： 我终于让它工作了，但是 using axios instead of fecth:

这是我最后的 spring 开机休息控制器：

@RequestMapping(value = "/", method = RequestMethod.POST)
    public boolean addDocument(@RequestPart("document") Document document, @RequestPart("file") MultipartFile file) {
        // Do things!
        return true;
    }

还有我的 javascript/axios 电话：

var documentBlob = new Blob([JSON.stringify({ documentName: "test" })], {
      type: "application/json"
    });
    var formData = new FormData();

    formData.append("document", documentBlob);
    formData.append("file", this.state.file);

    axios({
      method: "post",
      url: "/document/",
      data: formData,
      config: { headers: { "Content-Type": "multipart/form-data" } }
    })
      .then(response => {
        console.log("it's working!");
        console.log(response);
      })
      .catch(function(error) {
        console.log(error);
      });

Answer 1

我认为问题出在您的 spring 控制器请求映射中。你不应该在那里映射到 /。

试试这个...

@RestController
@RequestMapping("/document")
public class DocumentController {

    @Autowired
    private DocumentRepository documentRepository;  

    @RequestMapping(method = RequestMethod.POST, consumes = { "multipart/form-data" })
    public boolean addDocument(@RequestPart("properties") Document document, @RequestPart("file") MultipartFile file) {
        documentRepository.save(document);
        return true;
    }
}

Answer 2

您是否尝试使用 "multipart/form-data" 内容类型 header 发出该请求？

使用该映射方法使用已定义的 header，您的控制器将无法解析没有正确内容类型的请求。

Answer 3

我终于让它工作了，但是使用 axios 而不是 fetch。

查看编辑后的原文post查看我的解决方案。

SpringBoot/Fetch：无效的 MIME 类型 "undefined"：不包含“/”

SpringBoot / Fetch : Invalid mime type "undefined": does not contain '/'

javascript

form-data

fetch

mime-types

spring-boot