解决前端页面报错：Not allowed to load local resource

最新推荐文章于 2025-01-16 15:59:13 发布

骐骥1月

最新推荐文章于 2025-01-16 15:59:13 发布

阅读量1.5k

点赞数 2

文章标签：前端资源映射

本文链接：https://blog.youkuaiyun.com/sig321/article/details/143977617

版权

在前后端分离项目中，在前端页面里使用file://的绝对路径访问本地图片，在加载图片的

时候会报出Not allowed to load local resource 的错误。

这是因为浏览器出于安全因素，禁止通过绝对路径访问图片，需要通过虚拟路径进行访问。

解决方法：

在后端接口中增加一个配置类，进行资源映射：

@Configuration
public class PictureConversionConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        /**
         * 资源映射路径
         * addResourceHandler：访问映射路径
         * addResourceLocations：资源绝对路径
         */
        registry.addResourceHandler("/xyz/**")
                .addResourceLocations("file:///E:/xyz/");

    }
}

第一个 addResourceHandler 方法里面填写你想要设置的虚拟路径，下面

addResourceLocations 方法填写资源的绝对路径。

如上示例配置完成后，虚拟路径为

http://localhost:配置类端口号/xyz/子文件夹/文件名.png