解決前端訪問本地資源圖片顯示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:是我自己配置的訪問路徑(沒配置就不用寫)

 

這樣就大功告成啦!希望可以解決你的問題~

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM