发送表单数据类型请求时出现 400 HTTP 错误

Question

大家好，我正在从 (angular CLI 11) 前端向 (spring boot) 后端发送表单数据类型请求。在这个请求中，我想发送一张包含一些细节的图片。
无论如何，当我发送请求时出现 400 错误

前端服务class相关方法

Send( file: File, description: string, feeling: string): Observable<HttpResponse<any>> {
    const body: FormData = new FormData();
    body.append('file', file);
    body.append('description', description);
    body.append('feeling', feeling);
    return this.http.post<HttpResponse<any>>(environment.baseUrl + '/api/v1/launches', body, {
      observe: 'response'
    });
  }

后端相关post方法

@ResponseStatus(HttpStatus.CREATED)
    @PostMapping(
            produces = MediaType.MULTIPART_FORM_DATA_VALUE,
            consumes = MediaType.MULTIPART_FORM_DATA_VALUE
    )
    @ResponseBody
    public ResponseEntity<Object> save( @ModelAttribute LaunchBody body) throws Exception {
        System.out.println("body");

        try {
            System.out.println(body.getFile().getContentType());
            fileService.save(body.getFile());
            return new ResponseEntity<>("OK :)", HttpStatus.CREATED);
        } catch (Exception e) {
            return new ResponseEntity<>("Something went wrong !!", HttpStatus.INTERNAL_SERVER_ERROR);
        }
    }

CORS 过滤器

@Component
public class CORSFilter extends HttpFilter {
    @Override
    protected void doFilter(HttpServletRequest request, HttpServletResponse response, FilterChain chain) throws IOException, ServletException {
        response.setHeader("Access-Control-Allow-Origin", "http://localhost:4200");
        response.setHeader("Access-Control-Allow-Methods", "GET,POST,PUT,DELETE,OPTION");
        response.setHeader("Access-Control-Allow-Headers", "Content-type,Origin,Authorization");
        super.doFilter(request, response, chain);
    }
}

Answer 1

好的，我终于找到了答案。问题是当我创建表单数据主体时发生错误：/在那里我为文件元素设置了错误的值。在 component.ts、

this.file = event.target.files;

这是应该更正的错误

this.file = event.target.files[0];

发送表单数据类型请求时出现 400 HTTP 错误

400 HTTP error when sending form data type request

angular

spring-boot

rest

spring-security

multipartform-data