解决前端访问本地资源图片显示Not allowed to load local resource的问题

本人使用的是前后端分离的项目 React+SpringBoot,想前台访问本地的图片但是却显示这个错，（mac电脑）

这个地址是直接存在了数据库里，然后前端拿到的。

这个地方我犯了个致命的错误，浏览器是不能直接访问本地资源的，也是出于安全考虑，如果浏览器可以直接访问本地的话，那也是一件很可怕的事情。

所以：需要使用虚拟路径进行映射，在后端加映射路径的代码。

1.  addResourceHandler代表你要访问的路径，addResourceLocations代表你的图片真实存在的路径，意思就是：image代替了/Users/yuan/workspace-idea/images/的路径

 1 @Configuration
 2 public class WebConfig implements WebMvcConfigurer {
 3 
 4         @Override
 5         public void addResourceHandlers(ResourceHandlerRegistry registry) {
 6             /**
 7              * 资源映射路径
 8              * addResourceHandler：访问映射路径
 9              * addResourceLocations：资源绝对路径
10              */      registry.addResourceHandler("/image/**").addResourceLocations("file:/Users/yuan/workspace-idea/images/");
11         }
12 
13 }

2.很多网上的教程一般就讲到这里，但是具体的访问路径却没说，所以最终访问图片的虚拟路径是：http://localhost:8080/video/image/u1.jpg

3.http://localhost:8080：输入你自己的ip地址和端口，video：是我自己配置的访问路径（没配置就不用写）

这样就大功告成啦！希望可以解决你的问题～

标签：load,addResourceHandler,resource,映射,image,路径,访问,allowed,addResourceLocations
来源： https://www.cnblogs.com/yystudyhard/p/15702176.html