【问题解决记录】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浏览器的兼容问题很多，很多需要特殊处理，尽量使用谷歌。