H5白屏問題

前言

前陣子弄了灰度環境,H5這邊須要給灰度環境的接口加上Cookie,配置的期間遇到一些Cookie問題以及白屏在此記錄下css

一、H5請求接口帶不上Cookiehtml

解決方法:前端使用了 webpack 對項目進行打包,其中 crossOriginLoading 這一項配置的是 anonymous,因爲配置錯了,致使Cookie帶不上前端

`crossOriginLoading`此選項能夠啓用跨域加載(cross-origin loading) chunk。 `false`- 禁用跨域加載 `anonymous` - 啓用跨域加載。當使用 anonymous時,發送不帶憑據(credential)的請求。在加載此腳本資源時不會帶上用戶的 Cookies `use-credentials`- 啓用跨域加載。發送帶憑據(credential)的請求。在加載此腳本資源時會帶上用戶的 Cookies

 

二、H5白屏,js 代碼報錯致使的webpack

解決方法:這種報錯最明顯也是最簡單的一種,直接複製連接在網頁打開,F12進入開發者模式,觀察 console 的報錯並解決對應的問題便可nginx

 

三、H5白屏,CDN問題web

解決方法:因爲部分CDN加速區域不一樣,致使各個區域請求 js、css 等資源響應的速度不一樣,部分可能請求超時,(好比當時有個客戶是國外的,打開咱們的 H5 連接一直白屏,而咱們這邊卻正常)這種狀況只能聯繫CDN提供方看可否解決,此外也能夠用 17測 進行資源請求的測試跨域

 

四、H5白屏,微信掃碼進入頁面白屏瀏覽器

解決方法:因爲微信有緩存大小的限制,前端若在緩存中存放了太多的數據的話,可能會致使緩存失效,進而白屏,這一點是在清除微信緩存以後無心間找到的解決方法緩存

 

五、H5白屏,部分蘋果手機用戶白屏微信

解決方法:當時因爲前端項目比較多,打包的時候得配置好對應的請求域名,相對繁瑣且容易出錯,這裏就使用了 nginx 重寫的規則(前端無需寫上對應的資源域名),將對應的環境域名拼接到對應的資源前,此時經過瀏覽器觀察能夠看到這些資源先經過301跳轉,再請求對應域名的資源。後期發現這種作法出現了部分蘋果手機用戶進入某些頁面的時候白屏,這時候猜測多是不一樣手機瀏覽器機制的問題,Safari瀏覽器的301機制可能跟其餘瀏覽器的不一樣,又將前端的請求域名經過301跳轉的機制換掉以後就解決了

 

 

參考:

https://www.cnblogs.com/joyco773/p/9049623.html

https://www.jianshu.com/p/561a8720e762

相關文章
相關標籤/搜索