英文:
CORS issue during file upload and download in [framework/library]
问题
描述
在我的angular-springboot3应用程序中,当执行文件上传和下载操作时,我遇到了CORS(跨源资源共享)问题。CORS问题仅在与这些文件相关的请求中发生,而其他API请求正常工作。
问题
在尝试上传或下载文件时,我在浏览器控制台中收到以下错误消息:
Acess to XMLHttpRequest at 'http://localhost:8081/api/v1/download-excel' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
附加信息:
- 我已经在后端控制器中为文件上传/下载端点设置了适当的
@CrossOrigin
注释。 - 我已经验证CORS问题特定于文件上传和下载请求,因为应用程序中的其他API请求未受影响。
- 我尝试在前端的
http.post()
方法中添加了withCredentials: true
选项,但没有解决CORS问题。 - 服务器已正确配置CORS头,允许来自前端来源的请求。
代码片段
前端:
uploadExcelFile(file: File): Observable<any> {
return this.http.post(this.API_URL+'upload-excel', file);
}
downloadExcelFile(toDownload: any[]): Observable<HttpResponse<Blob>> {
var idList: number[] = []
toDownload.forEach((value)=> idList.push(value.id))
const headers = new HttpHeaders({
'Content-Type': 'application/octet-stream',
});
const params = new HttpParams().set('ids', idList.join(','));
return this.http.post<Blob>(this.API_URL+'download-excel',params, {
headers: headers,
observe: 'response',
responseType: 'blob' as 'json'
}).pipe(
catchError((error: any) => {
console.error('Error occurred during file download:', error);
throw error;
})
);
}
后端:
@CrossOrigin(origins = "http://localhost:4200")
@RequestMapping(path = "/upload-excel", method = RequestMethod.POST)
public ResponseEntity<?> uploadExcelFile(@RequestParam("file") MultipartFile file) {
// ... 省略部分代码 ...
return new ResponseEntity<>("File uploaded successfully", HttpStatus.OK);
}
@CrossOrigin(origins = "http://localhost:4200")
@RequestMapping(path = "/download-excel", method = RequestMethod.GET)
public ResponseEntity<byte[]> downloadExcelFile(@RequestBody List<Navire> toDownload) throws IOException {
// ... 省略部分代码 ...
return new ResponseEntity<>(bytes, headers, HttpStatus.OK);
}
安全配置
@Configuration
@EnableWebSecurity
@RequiredArgsConstructor
public class SecurityConfiguration {
// ... 省略部分代码 ...
}
希望这些信息对你有所帮助,解决与Spring Boot 3相关的文件上传和下载功能的CORS问题。如果你有更多问题或需要进一步的协助,请随时提出。
英文:
Description
I'm encountering a CORS (Cross-Origin Resource Sharing) issue specifically when performing file upload and download operations in my angular-springboot3 application. The CORS problem occurs only with these file-related requests, while other API requests work fine.
Problem
When attempting to upload or download files, I receive the following error message in the browser console:
Acess to XMLHttpRequest at 'http://localhost:8081/api/v1/download-excel' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Additional Information:
- I have already set the appropriate
@CrossOrigin
annotation in the backend controller for the file upload/download endpoints. - I have verified that the CORS issue is specific to file upload and download requests, as other API requests in the application are not affected.
- I have tried adding the
withCredentials: true
option in the frontend http.post() method, but it did not resolve the CORS issue. - The server is properly configured with CORS headers and allows requests from the frontend origin.
Code snippets
Front End :
uploadExcelFile(file: File): Observable<any> {
return this.http.post(this.API_URL+'upload-excel', file);
}
downloadExcelFile(toDownload: any[]): Observable<HttpResponse<Blob>> {
var idList: number[] = []
toDownload.forEach((value)=> idList.push(value.id))
const headers = new HttpHeaders({
'Content-Type': 'application/octet-stream',
});
const params = new HttpParams().set('ids', idList.join(','));
return this.http.post<Blob>(this.API_URL+'download-excel',params, {
headers: headers,
observe: 'response',
responseType: 'blob' as 'json'
}).pipe(
catchError((error: any) => {
console.error('Error occurred during file download:', error);
throw error;
})
);
}
Back end:
@CrossOrigin(origins = "http://localhost:4200")
@RequestMapping(path = "/upload-excel", method = RequestMethod.POST)
public ResponseEntity<?> uploadExcelFile(@RequestParam("file") MultipartFile file) {
ExcelUploader helper = new ExcelUploader();
List<Entity> toAdd = helper.uploadFromExcel(file);
navireRepository.saveAll(toAdd);
return new ResponseEntity<>("File uploaded successfully", HttpStatus.OK);
}
@CrossOrigin(origins = "http://localhost:4200")
@RequestMapping(path = "/download-excel", method = RequestMethod.GET)
public ResponseEntity<byte[]> downloadExcelFile(@RequestBody List<Navire> toDownload) throws IOException {
ExcelDownloader helper = new ExcelDownloader();
List<Navire> toDownload = new ArrayList<>();
for (Long id : ids) {
toDownload.add(repository.getReferenceById(id));
}
HttpHeaders headers = new HttpHeaders();
headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);
headers.set("Access-Control-Allow-Origin", "*");
headers.setContentDispositionFormData("attachment", "entity.xlsx");
byte[] bytes = helper.downloadToExcel(toDownload);
return new ResponseEntity<>(bytes, headers, HttpStatus.OK);
}
hers my security configuration too
@Configuration
@EnableWebSecurity
@RequiredArgsConstructor
public class SecurityConfiguration {
private final JwtAuthenticationFilter jwtAuthFilter;
private final AuthenticationProvider authenticationProvider;
private final LogoutHandler logoutHandler;
@Bean
public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
http
.csrf()
.disable()
.cors()
.disable()
.authorizeHttpRequests()
.requestMatchers("/api/v1/**", "/swagger-ui/**", "/v3/api-docs/**")
.permitAll()
.anyRequest()
.authenticated()
.and()
.sessionManagement()
.sessionCreationPolicy(SessionCreationPolicy.STATELESS)
.and()
.authenticationProvider(authenticationProvider)
.addFilterBefore(jwtAuthFilter, UsernamePasswordAuthenticationFilter.class)
.logout()
.logoutUrl("/api/v1/auth/logout")
.addLogoutHandler(logoutHandler)
.logoutSuccessHandler((request, response, authentication) -> SecurityContextHolder.clearContext())
;
return http.build();
}
}
I would greatly appreciate any insights or suggestions on how to resolve this CORS issue specifically related to file upload and download feature with Spring boot 3. Thank you in advance for your help!
答案1
得分: 0
解决方案
当我添加了一个全局CORS配置时,一切都进行得很顺利,就像这样:
@Bean
public FilterRegistrationBean<CorsFilter> corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
CorsConfiguration config = new CorsConfiguration();
config.addAllowedOrigin("http://localhost:4200");
config.addAllowedHeader("*");
config.addAllowedMethod("*");
source.registerCorsConfiguration("/**", config);
FilterRegistrationBean<CorsFilter> bean = new FilterRegistrationBean<>(new CorsFilter(source));
bean.setOrder(0);
return bean;
}
英文:
Solution
It all went smoothly when I added a global cors configuration like so
@Bean
public FilterRegistrationBean<CorsFilter> corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
CorsConfiguration config = new CorsConfiguration();
config.addAllowedOrigin("http://localhost:4200");
config.addAllowedHeader("*");
config.addAllowedMethod("*");
source.registerCorsConfiguration("/**", config);
FilterRegistrationBean<CorsFilter> bean = new FilterRegistrationBean<>(new CorsFilter(source));
bean.setOrder(0);
return bean;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论