Vue开发系列——读取本地资源报错‘Not allowed to load local resource:

目录

一、遇到问题

二、报错原因

三、解决方案

1、 在后端实现WebMvcConfigurer接口

2、前端Vue所有的本地地址替换成http://localhost:8888即可

---

一、遇到问题

Vue读取本地资源时报错：‘Not allowed to load local resource: file:///Users/apple/Documents/’

想模拟实现Excel下载功能，使用如下代码报错：

var url = 'file:///Users/apple/Documents/intelligentscoresystem/uploads/199/result/result.xls';
window.open(url);// url为文件连接

二、报错原因

出于安全考虑,浏览器是不能直接访问本地资源的

三、解决方案

        实际上无论是图片资源还是文件资源，都会存储在服务器上。故而为了解决浏览器是不能直接访问本地资源的问题，现在在后端模拟实现资源存在服务器的场景。

1、 在后端实现WebMvcConfigurer接口

@Configuration
public class WebConfig implements WebMvcConfigurer {/*** 资源映射路径* addResourceHandler：访问映射路径* addResourceLocations：资源绝对路径*/@Overridepublic void addResourceHandlers(ResourceHandlerRegistry registry) {registry.addResourceHandler("/uploads/**").addResourceLocations("file:///Users/apple/Documents/intelligentscoresystem/uploads/");}
}

注意： 现在本地的资源地址，就映射到了服务器资源地址上。

比如，

本地地址：file:///Users/apple/Documents/intelligentscoresystem/uploads/199/result/result.xls

映射后地址：

http://localhost:8888/uploads/199/result/result.xls

其中：http://localhost:8888为服务器ip地址、端口号

注：

WebMvcConfigurer是Spring MVC（或Spring Boot）中用于自定义框架配置的接口/抽象类，允许开发者通过JavaBean形式替代传统XML配置文件进行个性化设置。

核心功能
主要用于配置拦截器、视图解析器、消息转换器、静态资源处理、跨域资源共享（CORS）等特性，覆盖方法包括：

‌addInterceptors‌：注册自定义拦截器，支持请求预处理和响应后处理逻辑 ‌
‌configureViewResolvers‌：配置视图解析器，将逻辑视图名转换为物理视图实现 ‌
‌addCorsMappings‌：定义跨域资源共享规则，控制API访问权限 ‌
‌addResourceHandlers‌：映射静态资源路径到特定URL ‌
 

2、前端Vue所有的本地地址替换成http://localhost:8888即可

比如，模拟Excel下载实现的函数如下：

startDownload() {var url = 'http://localhost:8888/uploads/'+ this.subformdata.courseId+ '/result/result.xls';window.open(url);// url为文件连接}