cordova使用http協議打開頁面(cordova結合qiankunJs)


起因

  1. cordova的webview默認使用file協議打開頁面
  2. qiankunJs無法(基於fetch)使用file協議加載子應用
  3. Cookie也無法在file協議下使用

雙擊頁面以file協議打開qiankun項目,將無法加載子應用,會報如下錯誤

registerServiceWorker.ts:29 Error during service worker registration: TypeError: Failed to register a ServiceWorker: The URL protocol of the current origin ('null') is not supported

參考

qiankun 是否支持前端離線包本地加載
混合應用:從 file 協議到本地 HTTP 服務器
cordova-plugin-ionic-webview跨域問題

解決辦法

因為cordova幾乎沒人維護,但是因為優秀的思路被ionic團隊看重,並為期續命。
所以,為cordova編寫一個可以在原生內部起服務的形式打開頁面(即http訪問頁面的)插件cordova-plugin-ionic-webview

cordova plugin add cordova-plugin-ionic-webview
npm install @ionic-native/ionic-webview

安裝完成,再次打開,頁面將是以http的形式打開。
協議默認http
域名默認localhost
端口默認80
若無特殊要求,無需任何配置即可。

注意事項

  1. 默認cordova是支持跨域,因為在config.xml中這句話就是允許跨域
<access origin="*" />

但是使用cordova-plugin-ionic-webview即出現跨域現象,
解決辦法:最簡單的就是讓后端放開跨域或者nginx代理跨域即可。

  1. nginx代理后出現如下跨域錯誤的
The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by ...

把vue項目中的axios.defaults.withCredentials = true; 刪除即可
建議前后端分離的項目,用token代替cookie,從而避免過多坑

預覽


免責聲明!

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



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