起因
- cordova的webview默認使用file協議打開頁面
- qiankunJs無法(基於fetch)使用file協議加載子應用
- 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
若無特殊要求,無需任何配置即可。
注意事項
- 默認cordova是支持跨域,因為在config.xml中這句話就是允許跨域
<access origin="*" />
但是使用cordova-plugin-ionic-webview
即出現跨域現象,
解決辦法:最簡單的就是讓后端放開跨域或者nginx代理跨域即可。
- 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,從而避免過多坑