【問題解決記錄】vue解決低版本安卓與ios10以下系統兼容性問題

問題描述：

　　項目中的企業微信內部應用，使用Vue-cli搭建的H5頁面web，在低版本的安卓手機或ios8.0、9.0中出現接口數據訪問失敗，HTTP狀態碼返回0的問題，無法正常使用系統。安卓手機主要出現問題得機型為oppo、vivo。

問題分析：

　　舊版本系統對ES6新特性不支持。比如箭頭函數,let，const。另外，還有少部分低版本安卓不支持小部分的ES5語法。

解決方法：

　　首先在index.html中加入這三句：

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,IE=IE9"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 

　　一：若在項目中使用了ES6 promise對象，在Chrome、Safari瀏覽器下可以正常運行，但在360兼容模式、IE內核中不支持。

　　安裝依賴：npm install es6-promise -S // 下載插件

 　　在main.js中引入：require('es6-promise').polyfill()

　　或者  

import Es6Promise from 'es6-promise'
Es6Promise.polyfill()

　　二：用於對ES6新語法不支持的瀏覽器

　　安裝依賴：npm install babel-polyfill -S

　　在main.js中引入：import "babel-polyfill"，放在最頂部，確保全面加載

　　更改 webpack.base.conf.js 文件中的入口 entry：

entry: {
        app: ["babel-polyfill", "./src/main.js"] //為低版本系統配置
        //app: './src/main.js' //舊配置
},

 

重新打包發布，問題解決。

 【補充拓展】IE瀏覽器中，以上方法設置后，依然會有報錯，還需要把es6轉es5

　　參考：https://blog.csdn.net/qq_24985715/article/details/93764818?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_baidulandingword-2&spm=1001.2101.3001.4242

　　轉換語句：npm i babel-preset-es2015 -s

　　並且在項目的根目錄下，修改.babelrc的內容，添加'es2015'

　　

　　安裝 npm i classlist-polyfill,並且在base.config.js中，添加'classlist-polyfill'

　　app: ["classlist-polyfill","babel-polyfill", "./src/main.js"]  以上操作不一定非要使用，可以嘗試下面的操作

 

　　關於IE瀏覽器中vue用axios跨域請求接口，報錯列表中不存在請求標頭，此問題就是出現android9或者其他手機版本調用接口失敗，狀態碼為0的原因，解決此問題后，兼容性問題基本就都解決了

　　接口訪問失敗，原因為在后台接口的跨域設置中，Access-Control-Allow-Headers設置的通配符*在IE瀏覽器不支持！

　　

 

 　　http中標准的head，認證名字叫做Authorization，A要大寫，但在vue用axios跨域請求時，傳的head名稱為authorization，是小寫，所以如果是使用IE瀏覽器，即使是設置Access-Control-Allow-Headers為*，也無法識別！

　　解決辦法：

　　后台服務器權設置Access-Control-Allow-Headers為'authorization,Authorization,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type'，強制包含一個authorization頭即可

　　　　response.setHeader("Access-Control-Allow-Headers", "authorization,Authorization,DNT,X-CustomHeader," +"Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type");

　　　　或：

protected override void Application_BeginRequest(object sender, EventArgs e)
        {
            Response.Headers.Add("Access-Control-Allow-Origin", "*");
            if (Request.Headers.AllKeys.Contains("Origin") && Request.HttpMethod == "OPTIONS")//攔截處理Options請求
            {
                string domain = Request.Headers.Get("Origin");

                Response.Headers.Add("Access-Control-Allow-Methods", "*");
                Response.Headers.Add("Access-Control-Allow-Headers", "authorization,Authorization,DNT,X-CustomHeader," +
                "Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,*");
                Response.Flush();
                Response.End();
            }
            base.Application_BeginRequest(sender, e);
        }

　　　　注意：如果在后台接口層面進行了跨域設置，就不要在iis中在單獨設置http響應頭。

 

　　最后就是IE瀏覽器的兼容問題很多，很多需要特殊處理，盡量使用谷歌。