前言
前陣子弄了灰度環境，H5這邊需要給灰度環境的接口加上Cookie，配置的期間遇到一些Cookie問題以及白屏在此記錄下
1、H5請求接口帶不上Cookie
解決方法：前端使用了 webpack 對項目進行打包，其中 crossOriginLoading 這一項配置的是 anonymous，由於配置錯了，導致Cookie帶不上
`crossOriginLoading`此選項可以啟用跨域加載(cross-origin loading) chunk。 `false`- 禁用跨域加載 `anonymous` - 啟用跨域加載。當使用 anonymous時，發送不帶憑據(credential)的請求。在加載此腳本資源時不會帶上用戶的 Cookies `use-credentials`- 啟用跨域加載。發送帶憑據(credential)的請求。在加載此腳本資源時會帶上用戶的 Cookies
2、H5白屏，js 代碼報錯導致的
解決方法：這種報錯最明顯也是最簡單的一種，直接復制鏈接在網頁打開，F12進入開發者模式，觀察 console 的報錯並解決對應的問題即可
3、H5白屏，CDN問題
解決方法：由於部分CDN加速區域不同，導致各個區域請求 js、css 等資源響應的速度不同，部分可能請求超時，（比如當時有個客戶是國外的，打開我們的 H5 鏈接一直白屏，而我們這邊卻正常）這種情況只能聯系CDN提供方看能否解決，此外也可以用 17測 進行資源請求的測試
4、H5白屏，微信掃碼進入頁面白屏
解決方法：由於微信有緩存大小的限制，前端若在緩存中存放了太多的數據的話，可能會導致緩存失效，進而白屏，這一點是在清除微信緩存之后無意間找到的解決方法
5、H5白屏，部分蘋果手機用戶白屏
解決方法：當時由於前端項目比較多，打包的時候得配置好對應的請求域名，相對繁瑣且容易出錯，這里就使用了 nginx 重寫的規則（前端無需寫上對應的資源域名），將對應的環境域名拼接到對應的資源前，此時通過瀏覽器觀察可以看到這些資源先通過301跳轉，再請求對應域名的資源。后期發現這種做法出現了部分蘋果手機用戶進入某些頁面的時候白屏，這時候猜想可能是不同手機瀏覽器機制的問題，Safari瀏覽器的301機制可能跟其他瀏覽器的不同，又將前端的請求域名通過301跳轉的機制換掉之后就解決了
參考：
https://www.cnblogs.com/joyco773/p/9049623.html
https://www.jianshu.com/p/561a8720e762