springBoot文件下载跨域问题

先说一下场景:

项目有一个需求,就是实现一个,多文件下载成一个 .zip压缩包文件

 

代码,写好了,并且也配置好了全局的跨域设置,如下代码所示

@Configuration
public class SimpleCORSFilter {

    @Bean
    public CorsFilter corsFilter() {
        final UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
        final CorsConfiguration corsConfiguration = new CorsConfiguration();
        /*是否允许请求带有验证信息*/
        corsConfiguration.setAllowCredentials(true);
        /*允许访问的客户端域名*/
        corsConfiguration.addAllowedOrigin("*");
        /*允许服务端访问的客户端请求头*/
        corsConfiguration.addAllowedHeader("*");
        /*允许访问的方法名,GET POST等*/
        corsConfiguration.addAllowedMethod("*");
        urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsFilter(urlBasedCorsConfigurationSource);
    }

}

image.png

 

在本地跑没问题,觉得万事大吉了,很开心

image.png

 

然后发布到公司测试服务器

 

 

然后问题来了,前端的哥们找我说,我写的批量下载接口跨域了

 

我心里纳闷,不会呀,项目已经设置了全局的跨域的配置,怎么只有这个批量下载的接口跨域了

image.png

 

找了很久原因,度娘也问了很久,度娘的答案也是绝大部分都是抄来抄去,基本没什么营养

最后实在没办法,就找公司的大牛,他和我说,是不是我批量下载的接口,把全局的跨域配置给清空了

然后,我又仔细去看了一下代码,终于发现了问题的最终原因

image.png

 

如下图所示

image.png

上图所示的代码

response.reset(); //这句代码是罪魁祸首,他会清空响应的一些信息,包括全局的跨域配置

所以解决办法是:(选择一个即可)

1、把 response.reset(); 注释掉,如下代码所示

image.png

2、response.reset(); 不注释,并且配置如下

image.png

在Spring Boot中实现文件下载涉及到两个方面:服务器端配置和前端跨域请求处理。下面是实现文件下载跨域的一种方式: 1. 服务器端配置: 在Spring Boot中,可以使用`@CrossOrigin`注解来处理跨域请求。在你的Controller方法上添加该注解,示例如下: ```java @RestController public class FileController { @CrossOrigin(origins = "http://example.com") @GetMapping("/download") public ResponseEntity<InputStreamResource> downloadFile() throws IOException { // 下载文件的逻辑 // ... // 返回文件的InputStreamResource InputStreamResource resource = new InputStreamResource(inputStream); HttpHeaders headers = new HttpHeaders(); headers.add("Content-Disposition", "attachment; filename=file.txt"); return ResponseEntity.ok() .headers(headers) .contentLength(file.length()) .contentType(MediaType.APPLICATION_OCTET_STREAM) .body(resource); } } ``` 在`@CrossOrigin`注解中,`origins`参数指定了允许跨域访问的域名。你可以根据需要进行配置,也可以使用通配符`*`来允许所有域名跨域访问。 2. 前端跨域请求处理: 在前端代码中,需要确保发送下载文件请求时,设置正确的请求头和配置`withCredentials`为`true`以支持跨域请求。示例如下: ```javascript function downloadFile() { var xhr = new XMLHttpRequest(); xhr.open('GET', 'http://yourserver.com/download', true); xhr.withCredentials = true; // 允许发送跨域请求时携带cookie xhr.setRequestHeader('Access-Control-Allow-Origin', 'http://example.com'); // 设置请求头,与服务器端配置的允许跨域域名一致 xhr.responseType = 'blob'; // 响应类型为二进制数据 xhr.onload = function() { if (xhr.status === 200) { var blob = new Blob([xhr.response]); var link = document.createElement('a'); link.href = window.URL.createObjectURL(blob); link.download = 'file.txt'; link.click(); } }; xhr.send(); } ``` 在上述代码中,`xhr.withCredentials`设置为`true`会允许浏览器在跨域请求时携带cookie信息。`xhr.setRequestHeader`方法用于设置请求头,其中的域名需要与服务器端配置的一致。最后,将文件转为Blob对象,并通过动态创建a标签的方式实现文件下载。 请注意,以上代码仅作为示例,具体实现方式可能会根据你的需求和环境稍有不同。
评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值