前端根据url下载文件报错

前端根据url下载文件时，浏览器报错如下图

img

下载代码如下

   let a = document.createElement('a')
// 定义下载名称
    a.download = item.useTitleName
// 隐藏标签
    a.style.display = 'none'
// 设置文件路径
    a.href =  res.data
// 将创建的标签插入dom
    document.body.appendChild(a)
// 点击标签，执行下载
    a.click()
// 将标签从dom移除
    document.body.removeChild(a)

在网上找了找有说这个报错是由于浏览器没有访问静态曲线的权限，但是我在springboot中进行配置了，具体代码如下

package com.xjc.common.config;

import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
 * @ClassName com.xjc.common.config
 * @Author bill
 * @Describe
 * @Date 2023/5/2  9:03
 */
@Configuration
public class WebConfig implements WebMvcConfigurer {
    /**
     * 图片保存路径，自动从yml文件中获取数据
     */
    @Value("${file-save-path}")
    private String fileSavePath;
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        /**
         * 配置资源映射
         * 意思是：如果访问的资源路径是以“/images/”开头的，
         * 就给我映射到本机的“E:/images/”这个文件夹内，去找你要的资源
         * 注意：E:/images/ 后面的 “/”一定要带上
         */
        registry.addResourceHandler("/image/**")
                .addResourceLocations("file:"+fileSavePath);
//        registry.addResourceHandler("/usr/local/image/**")
//                .addResourceLocations("file:"+fileSavePath);
    }

}

这个/image/**是我本地的环境，按道理来讲，我已经配置了，但是还是不行，这个如何处理？

地址应该是绝对网络地址，比如 https://blog.csdn.net/image.png

可以把文件夹映射出去

【以下回答由 GPT 生成】

问题描述中没有提供报错截图，因此我无法得知具体的报错信息。根据您提供的问题描述，我猜测可能是跨域访问或文件路径配置的问题导致前端根据URL下载文件报错。

解决方案：

  1. 确认文件路径配置是否正确：

在WebConfig类的addResourceHandlers方法中，您使用registry.addResourceHandler("/image/**")配置了资源的访问路径为/image/**，并且使用file:前缀指定了文件保存路径。请确保fileSavePath变量的值为正确的文件保存路径。

  1. 解决跨域访问问题：

如果前端文件下载功能和后端接口不在同一个域下，浏览器会出现跨域问题。解决跨域问题的常用方法有以下几种：

  • 在后端配置允许跨域访问：在后端添加跨域配置，允许前端跨域访问。例如，在Spring Boot中可以使用@CrossOrigin(origins = "*")注解或通过配置CorsFilter来实现跨域访问。

  • 使用代理服务器转发请求：在前端的配置中，将请求地址设置为与后端同域的路径，再通过代理服务器将请求转发给后端。例如，在vue.config.js文件中配置代理规则。

  • 确认服务端是否正确响应文件下载请求：

使用浏览器开发者工具（F12）中的网络监控功能，查看请求的响应状态码和响应内容，确认服务器正确响应文件下载请求，并返回正确的文件内容。

如果您已经确认文件路径配置正确，并且解决了跨域访问问题，但问题仍然存在，请提供具体的报错信息和报错截图，以便更好地帮助您解决问题。



【相关推荐】



如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^