浏览器报错：Not allowed to load local resource 原因及解决办法

项目场景：

某程序袁最近在做一个二手交易网站的项目，项目有这样一个需求：将用户上传的商品图片保存在本地，将图片的url存在mysql数据库中，前端通过数据库的url访问图片。
上传图片的部分代码如下：

String fileName=imgFile.getOriginalFilename();//文件名
String filePath="D:\\IdeaProjects\\secondhans\\src\\main\\resources\\static\\images\\product";
//封装上传文件位置的全路径
File targetFile=new File(filePath,fileName);
//把本地文件上传到封装上传文件位置的全路径
imgFile.transferTo(targetFile);

此时上传的图片会被存在项目目录下

---

问题描述

程序袁在前端访问已经上传过的图片时，发现图片无法访问：

并且浏览器报错：Not allowed to load local resource

---

原因分析：

浏览器出于安全方面的考虑，禁止网页访问本地文件，因为图片是存在项目目录下的，所以无法通过本地的url进行访问。

---

解决方案：

程序袁在看了很多篇博客后，发现只要配置虚拟路径映射本地路径就ok了，下面提供一种配置虚拟路径的方法：

@Configuration
public class MyConfig implements WebMvcConfigurer {
	/*
	*addResourceHandler:访问映射路径
	*addResourceLocations:资源绝对路径
	*/
	@Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/product/**").addResourceLocations("file:D:/secondhansImage/");
    }
}

相应的上传图片的代码也要修改：

String fileName=imgFile.getOriginalFilename();//文件名
String filePath="D:/secondhansImage/";
File targetFile=new File(filePath,fileName);
imgFile.transferTo(targetFile);
product.setImageurl("/product/"+fileName);

小结

即使是简单的项目，也能收获颇多！