Spring API 请求给出 "Content type 'application/octet-stream' not supported" 错误，但是使用 Postman 时请求成功

Question

我正在尝试通过我的 React 前端向 Spring 后端发送一个 API 请求。当我发送请求时出现此错误：

Could not resolve parameter [0] in private org.springframework.http.ResponseEntity com.example.bottlecap.controllers.BottlecapController.entryForm(com.example.bottlecap.domian.Bottlecap,org.springframework.web.multipart.MultipartFile): Content type 'application/octet-stream' not supported

但是，当我使用 Postman 设置请求时，一切顺利。我认为我在 React 端设置 FormData 的方式可能存在问题。但是，我运气不太好。

我的 API 应该会收到一个 object，其中包含关于我提交的数据以及随提交一起提交的图像。在我的 Postman 请求中，我正在创建一个表单数据，其中包含一个 JSON 文件，该文件包含所有 object 数据和一个仅用于测试的随机图像。正如我所说，请求通过这个很好。但是，在前端代码中，我将 object 数据解析为 Json 并将其添加到 FormData 以及将图像添加到 FormData。

这是我的 Spring 控制器：

@RequestMapping(path ="/bottlecap/entry", method = RequestMethod.POST, consumes = {MediaType.MULTIPART_FORM_DATA_VALUE, MediaType.APPLICATION_OCTET_STREAM_VALUE})
    private ResponseEntity entryForm(@RequestPart("cap") Bottlecap cap, @RequestPart("file") MultipartFile image){
        System.out.println(cap);
        cap.toString();
        System.out.println("Test");
        return ResponseEntity.ok().build();

    }

这是我的 React 前端表单提交处理程序：

handleSubmit = event =>{

        console.log(this.state.page);
        
        console.log(this.state.page);
        event.preventDefault();
        const cap ={
            "name":this.state.name,
            "brand":this.state.brand,
            "yearMade":parseInt(this.state.yearMade),
            "country": this.state.country,
            "description":this.state.description,
            "yearFound":parseInt(this.state.yearFound),
            "isAlcoholic":"true"
        };
        const stringCap = JSON.stringify({cap});
        console.log(cap);
        var formData = new FormData();
        formData.append('cap', JSON.parse(stringCap));
        formData.append('file',this.state.imageFile)
        
        
            axios.post('http://localhost:8080/bottlecap/entry', formData, {headers:{'Content-Type':'multipart/form-data'}})
            .then(res=>{
                console.log(res);
                console.log(res.data);
                //window.location = "/success"
                this.setState({pageDone:true})
                this.setState({pageLoading:true})
            })

    }

Here is a screenshot of my Postman request if it may help.

这里还有我通过 Postman 发送的 json 文件的内容，如果它也有帮助的话。

{"name":"post-test",
"brand":"post-test",
"yearMade":1000,
"country":"post-test",
"description":"post-test",
"yearFound":1000,
"isAlcoholic":"true"}

我做的最后一个更改是在 axios API 请求中添加了一个 header，但仍然没有成功。

Answer 1

在 postman 中，对于名为 cap 的参数，您正在发送一个 .json 文件。但是在你的 reactjs 代码中，你正在做

formData.append('cap', JSON.parse(stringCap));

JSON.parse 将创建一个 javascript 对象，这不是您的后端所期望的。您需要将其作为 JSON 文件发送。

未经测试，但这可能会给您灵感。

const json = JSON.stringify(cap);
const blob = new Blob([json], {
  type: 'application/json'
});

var formData = new FormData();
formData.append('cap', blob);
formData.append('file', this.state.imageFile)

axios.post('http://localhost:8080/bottlecap/entry', formData, {headers:{'Content-Type':'multipart/form-data'}})
        .then(res=>{
    console.log(res.data);
}

Spring API 请求给出 "Content type 'application/octet-stream' not supported" 错误，但是使用 Postman 时请求成功

Spring API request giving "Content type 'application/octet-stream' not supported" error, however request is successful when using Postman

spring

reactjs

postman

axios

octetstring