前端做混合開發時 webview中打開h5頁面圖片不顯示原因解決方案

在做混合開發過程中，webview打開h5頁面時，若h5頁面是https訪問的，而內部圖片資源是http內容 就會存在圖片不顯示的問題 ；

 

問題分析：在https頁面請求http內容屬於安全策略的一種，請求了混合資源；

      自測時，在瀏覽器中顯示正常，實際上在控制台中已經打印警告用戶了（如下），

Mixed Content: The page at 'https://****' was loaded over HTTPS, but requested an insecure image 'http://***.png'. This content should also be served over HTTPS.

      在Security內部 也顯示了Non-secure origins 的內容，但是資源可以正常顯示。而在webview中直接就不加載該不安全資源，若想繼續加載該資源需要webview進行設置，去打開該Mixed Content

 

解決方案：1在android端去設置；

mWebview.getSettings().setJavaScriptEnabled(true);//啟用js 
mWebview.getSettings().setBlockNetworkImage(false);//解決圖片不顯示 
// 解決混合資源的加載
if(Build.VERSION.SDK_INT>=Build.VERSION_CODES.LOLLIPOP) 
settings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLAW); 

　

備注：接口跨域針對的是xhr請求 （包含對他封裝的一些方法，axios ajax 等）

         靜態資源內容不存在跨域問題，應該說是一種安全策略，https的被認為是安全的內容，http的默認non-secure

       靜態資源和接口的區分 可以通過content-type查看（供參考）