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 {
    @Bean
    public 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 {
    @Override
    public 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 {
    @Autowired
    private 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. 完善的错误提示与用户引导

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