Vue 文件下载功能的跨域处理与前后端实现详解

        在 Web 应用开发中，文件下载功能是常见需求。但由于跨域限制和认证机制的复杂性，实际开发中常遇到下载失败或权限错误等问题。本文将结合 Vue 前端和 Spring Boot 后端，详细介绍文件下载功能的实现与跨域问题的解决方案。

一、问题背景

        在某调查系统中，文件下载功能遇到以下典型问题：

1. 前端访问 /api/ssp/**/download 接口时提示跨域错误
2. 未认证用户无法直接访问下载链接
3. 下载文件时出现 401 Unauthorized 错误

        核心问题在于：

• 跨域资源共享（CORS）限制
• 安全配置过于宽松导致的权限漏洞
• JWT 认证机制与下载接口的兼容性问题

二、解决方案架构

1. 安全配置优化

        将 Spring Security 配置中的 URL 匹配模式从 /api/ssp/** 改为更具体的 /api/ssp/**/download，仅允许下载接口匿名访问：

@Configuration
@EnableWebSecurity
public class SecurityConfig {@Beanpublic SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {http.cors().and().csrf().disable().sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS).and().authorizeRequests().antMatchers("/api/login", "/api/register", "/api/captcha").permitAll().antMatchers("/api/ssp/**/download").permitAll() // 仅允许下载接口.anyRequest().authenticated();http.addFilterBefore(jwtAuthenticationFilter(), UsernamePasswordAuthenticationFilter.class);return http.build();}
}

2. CORS 全局配置

        添加 CORS 配置类，允许所有源和请求方法：

@Configuration
public class WebConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**").allowedOriginPatterns("*").allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS").allowedHeaders("*").allowCredentials(true).maxAge(3600);}
}

三、后端文件下载实现

1. 文件存储服务集成

        使用 MinIO 进行文件存储，实现下载接口：

@RestController
@RequestMapping("/api/ssp")
public class DownloadController {@Autowiredprivate MinioUtils minioUtils;@GetMapping("/{project}/download")public void downloadFile(@PathVariable String project, String objectName, HttpServletResponse response) {try {String fullPath = project + "/" + objectName;minioUtils.fileDownload(fullPath, response);} catch (Exception e) {response.setStatus(HttpServletResponse.SC_INTERNAL_SERVER_ERROR);e.printStackTrace();}}
}

四、前端调用实现

1. 基于 Axios 的下载方法

        使用 defHttp.get 方法并处理响应流：

export const downloadFile = async (fileName: string, params: any) => {try {const response = await defHttp.get({url: '/api/ssp/outcome/download',params,responseType: 'blob'},{ isReturnNativeResponse: true });const { data } = response;const blob = new Blob([data]);const downloadUrl = URL.createObjectURL(blob);const link = document.createElement('a');link.href = downloadUrl;link.download = fileName;link.click();URL.revokeObjectURL(downloadUrl);} catch (error) {// 错误处理逻辑}
};

2. 错误处理增强

        添加响应数据校验和错误提示：

if (data.size < 1024 && contentType.includes('json')) {const errorInfo = JSON.parse(await data.text());if (errorInfo.code === 401) {message.error('登录超时，请重新登录');router.push('/login');}
}

五、测试与验证

1. 直接 URL 访问测试：

curl -o report.pdf http://localhost:8080/api/ssp/project/download?objectName=report.pdf

   2.前端页面调用：  

<a @click="downloadFile('report.pdf', { project: 'project1' })">下载报告</a>

   3.异常场景测试：

1. 未登录状态下访问下载链接
2. 错误的文件路径请求
3. 大文件下载压力测试

六、常见问题与解决

1. 跨域错误：

   • 检查 CORS 配置是否正确
   • 确保响应头包含 Access-Control-Allow-Origin

2. 401 未授权：

   • 确认下载接口是否配置为 permitAll()
   • 检查 JWT 过滤器是否排除了下载路径

3. 文件损坏：

   • 验证文件流处理是否正确关闭
   • 检查响应头 Content-Type 设置

七、总结

通过以下关键步骤可以安全高效地实现文件下载功能：

1. 精细化安全配置，限定下载接口权限
2. 全局 CORS 配置解决跨域问题
3. 前后端协同处理文件流和异常
4. 完善的错误提示与用户引导

        本文提供的方案已在实际项目中验证，可有效解决文件下载功能中的跨域和权限问题，确保用户体验和系统安全性。