如何使用angular 7将文件上传到spring boot？

Question

In order to upload a file in angular 7 for a spring boot project, I am getting 404 with error blocked by CORS policy. the angular code:::

uploadFile(file: File){
        console.log("file to be uploaded...",file);
        const postData = new FormData();
        postData.append("file", file);
        this.http.post('http://localhost:8070/postFile',postData).subscribe(data=>{
            console.log("post succeessful.....",data);
        });    

spring boot code:::

@CrossOrigin(origins = "*")
            @PostMapping("/postFile")
            public ResponseDTO postFile(@RequestParam("file") MultipartFile file) {    


I have tried with @RequestPart as well here with same result.

when I try to upload the file for first time, I am getting the below log: Initializing Spring DispatcherServlet 'dispatcherServlet' Initializing Servlet 'dispatcherServlet' Completed initialization in 9 ms

After fisrt attempt , spring boot does not produce any log, however in browser I could see below log on every attempt.

POST http://localhost:8070/postFile 404    Zone.js
Access to XMLHttpRequest at 'http://localhost:8070/postFile' from origin 
'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Could you please suggest , how to upload a file in angular + spring boot.

Answer 1

@CrossOrgin should work, but you could also try this

@Configuration
public class WebConfiguration implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedMethods("*");
    }
}

or in @SpringBootApplication class add

@Bean
    public FilterRegistrationBean corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true);
        config.setAllowedOrigins(Collections.singletonList("*"));
        config.addAllowedHeader("*");
        config.addAllowedMethod("*");
        source.registerCorsConfiguration("/**", config);
        FilterRegistrationBean<CorsFilter> filterRegistration = new FilterRegistrationBean<>(new CorsFilter(source));
        filterRegistration.setOrder(Ordered.HIGHEST_PRECEDENCE);
        return filterRegistration;
    }